Prikaz elementov s CSS

Lastnosti display, overflow in visibility določajo, kako se elementi prikažejo, kako sodelujejo v postavitvi strani in kako se obnaša presežna vsebina.

Z lastnostjo display določimo, ali je element bločni, vrstični, skrit, se obnaša kot del tabele ali pa uporablja sodobnejši način postavitve. Lastnost overflow določa, kaj se zgodi, ko je vsebina elementa večja od prostora, ki je na voljo. Lastnost visibility pa določa, ali je element viden, pri čemer lahko še vedno ostane del postavitve.

Osnovna pravila

• Lastnost display določa osnovni način prikaza elementa v postavitvi strani.
• Lastnost overflow določa, kako se obnaša vsebina, ki presega prostor elementa.
• Lastnost visibility določa, ali je element viden, ne da bi ga nujno odstranili iz postavitve.
• Sprememba lastnosti display lahko bistveno spremeni obnašanje že obstoječega elementa.
• Pri primerjavi vrednosti display: none in visibility: hidden je pomembno, ali želimo ohraniti prostor elementa v postavitvi.

Najpogostejše vrednosti lastnosti display

Najpogosteje uporabljene vrednosti lastnosti display so:

Spodnji primer pokaže, da lahko z lastnostjo display spremenimo običajno obnašanje elementov:

<p>Uporaba lastnosti display omogoči, da bosta odstavka postala vrstična elementa.</p>
<p>Ta odstavek se nadaljuje v isti vrstici.</p>
<div>Element div ni viden.</div>
<span>Element span je postal bločni element.</span>

p { display: inline; }
div { display: none; }
span { display: block; }

block, inline in inline-block

Tri najpogostejše vrednosti so:

• block: element zasede razpoložljivo širino in se začne v novi vrstici,
• inline: element teče skupaj z besedilom in se obnaša kot del vrstice,
• inline-block: element ostane v vrstici, vendar mu lahko določimo širino, višino in odmike.

<span class="blok-v-vrstici">Prvi element</span>
<span class="blok-v-vrstici">Drugi element</span>
<span class="blok-v-vrstici">Tretji element</span>

.blok-v-vrstici {
   display: inline-block;
   width: 120px;
   padding: 10px;
   background-color: #fccc88;
}

display: none

Vrednost display: none element popolnoma odstrani iz postavitve. Element ni viden in ne zasede prostora. To ni isto kot visibility: hidden, kjer element ostane v postavitvi, le prikazan ni.

Tabelarične vrednosti

Lastnost display omogoča tudi obnašanje elementov kot delov tabele, na primer table, table-row in table-cell. To je uporabno predvsem za razumevanje delovanja CSS, za prave podatkovne tabele pa še vedno uporabljamo HTML elemente table, tr, th in td.

<div class="tabela">
   <div class="vrstica">
      <div class="celica">A</div>
      <div class="celica">B</div>
   </div>
</div>

.tabela { display: table; }
.vrstica { display: table-row; }
.celica { display: table-cell; padding: 10px; border: 1px solid #fba517; }

Podrobnejša razlaga vrednosti flow-root

Vrednost flow-root povzroči, da element ustvari nov blokovni kontekst oblikovanja. To pomeni, da se njegova notranja postavitev obravnava kot samostojna celota.

Ta vrednost je uporabna predvsem v treh primerih:

• kadar želimo, da element pravilno zajame plavajoče elemente, ki so v njem,
• kadar želimo preprečiti zlivanje navpičnih zunanjih odmikov čez mejo elementa,
• kadar želimo, da element deluje kot samostojen blok brez dodatnih pomožnih prijemov.

Pri starejših prijemih smo za podobne učinke pogosto uporabljali dodatne prazne elemente ali različne različice tako imenovanega clearfix. Vrednost flow-root je sodobnejša in preglednejša rešitev, kadar želimo, da starševski element pravilno objame svojo notranjo vsebino.

V spodnjem primeru je v okvirju plavajoč element. Ker ima okvir nastavitev display: flow-root, pravilno zajame tudi plavajoči element:

<div class="okvir-flow-root">
   <div class="plavajoc">slika</div>
   Besedilo teče ob plavajočem elementu. Ker ima starševski element
   lastnost display: flow-root, pravilno zajame svojo notranjo vsebino.
</div>

.okvir-flow-root {
   display: flow-root;
   border: 2px solid #fba517;
   background-color: #fef3d0;
   padding: 10px;
}

.plavajoc {
   float: left;
   width: 70px;
   height: 70px;
   margin-right: 12px;
   background-color: #fccc88;
   text-align: center;
   line-height: 70px;
}

Lastnost overflow

Z lastnostjo overflow določimo, kako naj brskalnik prikaže vsebino, ki presega širino ali višino elementa. To je uporabno predvsem pri elementih, ki imajo določeno širino ali višino.

Primer vsebine, ki presega višino elementa:

<div class="okvir visible">
Ta vsebina je višja od elementa in sega čez njegovo spodnjo mejo.
Ta vsebina je višja od elementa in sega čez njegovo spodnjo mejo.
Ta vsebina je višja od elementa in sega čez njegovo spodnjo mejo.
</div>

.okvir {
   width: 260px;
   height: 80px;
   padding: 10px;
   border: 1px solid #fba517;
   background-color: #fccc88;
}
.visible { overflow: visible; }

Če želimo presežni del skriti, uporabimo overflow: hidden:

.hidden { overflow: hidden; }

Z vrednostjo overflow: scroll dobimo drsnika:

.scroll { overflow: scroll; }

Z vrednostjo overflow: auto se drsnika prikažeta samo, če sta potrebna:

.auto { overflow: auto; }

Lastnost visibility

Z lastnostjo visibility določimo, ali je element prikazan. Za razliko od lastnosti display: none element pri vrednosti visibility: hidden ostane v postavitvi in še vedno zaseda svoj prostor.

Primer razlike med visibility: hidden in navadnim prikazom:

<p>Prvi odstavek je viden.</p>
<p class="skrit">Ta odstavek ni viden, vendar še vedno zaseda prostor.</p>
<p>Tretji odstavek ostane pod skritim odstavkom.</p>

.skrit { visibility: hidden; }

Primerjava z lastnostjo display: none:

<p>Prvi odstavek je viden.</p>
<p class="odstranjen">Ta odstavek ni prikazan in ne zaseda prostora.</p>
<p>Tretji odstavek se pomakne navzgor.</p>

.odstranjen { display: none; }

Priporočila

• Vrednost inline-block uporabi takrat, ko želiš elemente obdržati v isti vrstici, vendar jim določiti širino ali višino.
• Vrednost flow-root uporabi, kadar želiš, da element deluje kot samostojen blok in pravilno zajame plavajoče elemente.
• Za skrito presežno vsebino uporabi overflow: hidden ali overflow: auto, kadar je to smiselno glede na namen elementa.
• Za začasno skrivanje elementa z ohranjanjem prostora uporabi visibility: hidden.
• Za popolno odstranitev elementa iz prikaza in postavitve uporabi display: none.

Pogoste napake

• Mešanje pomenov lastnosti display: none in visibility: hidden.
• Uporaba inline, kadar bi bil zaradi širine, višine ali odmikov primernejši inline-block.
• Pri presežni vsebini ni določeno, ali naj bo odrezana ali naj se prikaže drsnik.
• Uporaba flow-root brez razumevanja, zakaj želimo nov blokovni kontekst oblikovanja.