Display

CSS vlastnost display určuje způsob zobrazení prvku.

Block a inline = blokové a řádkové prvky

Výchozí zobrazení je block, inline nebo list-item podle toho, jaký se použije html tag. Některé tagy se od přirozenosti zobrazují blokové (např. <div>, <p>), jiné řádkové (<span>, <strong>). (Tagy <ins> a <del> nejsou to ani to.) Blokové prvky (display: block) za sebou dělají konec řádku a jde jim nastavit výška a šířka. Řádkové prvky (display: inline) za sebou konec řádku nedělají, šířka a výška by jim neměla jít nastavit (v quirk módu Exploreru jde). Vlastností display se dají z řádkových prvků dělat blokové a naopak. Například odkaz (tag <a>) je prvek řádkový. Zápisem

a {display: block}

se z odkazů udělají prvky blokové = bude za nimi zalomený řádek a půjdou jim nastavit rozměry.

Display: list-item

Tag <li> se zobrazuje jako list-item, to znamená položku seznamu. I z jiných tagů (např. div) lze udělat položku seznamu, ale jen jsou-li obklopeny tagy <ul>, <ol>, <dir> nebo <menu>. Příklad: test vlastnosti display: list-item. Z jiného tagu se zápisem display: list item dá udělat položka seznamu (s číslem nebo odrážkou, to se nastavuje pomocí list-style-type), ale funguje to pouze v moderních prohlížečích.

Display: none

Prvky dokumentu lze skrýt pomocí display: none. Jde o úplné skrytí, ne pouze o zneviditelnění jako při visibility: hidden. Po prvku nezůstane volné místo (což po visibility: hidden zůstane). Prohlížeče prvky skryté pomocí display: none normálně stahují, pouze Opera 7 je nestahuje. Možná si říkáte, k čemu je dobré dávat do stránky prvky, které se nezobrazí. Je to dobré na práci s javascriptem a v hektické praxi také na skrývání věcí, které prostě ještě nejsou hotové. Další uplatnění se najde při tisku, kdy se prostě některé věci na obrazovce viditelné na tisk nepošlou.

Zděděné nezobrazení nelze přetlouct. Pokud mám např. skrytý (display: none) celý vnější prvek, vnitřní prvky, které obsahuje, nelze nijak zobrazit žádnou hodnotou vlastnosti display.

Další hodnoty vlastnosti display

Výše uvedené hodnoty fungují v Internet Exploreru (nejlépe v 5.5 a 6), v Mozille a Opeře 7. V moderních prohlížečích fungují také další hodnoty vlastnosti display, vhodné zejména pro stylování XML dokumentů. Jde o hodnoty compact, run-in, marker a hodnoty pro tabulkové vykreslení. Pro práci s HTML stránkami kvůli ignoraci Internet Exploreru nemají význam (psáno 2003).

Tabulkové hodnoty fungují v Mozille a Opeře a jejich význam je celkem zřejmý. Jsou to hodnoty: table, table-row-group, table-header-group, table-footer-group, table-cell, table-column, table-column-group, table-caption. Hodnota display: inline-table má udělat tabulku ležící na řádku, ale Mozilla ji vykreslí jako display: table (uvádí Pixy).

Podpora

Hodnota display: run-in funguje pouze v IE 5 / Mac a v Opeře od verze 5. Hodnoty table-* fungují pouze v Mozille a v Opeře 5 +.

Příklady

Skrytí prvku

Často se display: none používá na skrytí prvků, které mají být vidět na zařízeních bez podpory kaskádových stylů (různé mobily, roboti apod.). Do takových prvků se někdy umisťují hlášky o tom, že "máte debilní prohlížeč bez podpory CSS", nebo raději (protože ta předchozí hláška není moc qěci) pomocné navigační prvky. Říká se tomu skrytá navigace:

<a href="#zacatek" style="display: none">přeskočit navigaci</a>

Takový prvek je v normálních prohlížečích neviditelný.

Převod na blokový element

Pokud chci mít pod sebou několik odkazů, můžu je prostrkat řádkovými zlomy (tag <br>). Není to však třeba prostrkávat, stačí nastavit takovým odkazům (tagům <a>, které jsou normálně řádkové) display: block a udělat z nich tak blokové prvky.

Takhle budou odkazy v řádku:

<div class="menu">
<a href="prvni.html">První odkaz</a>
<a href="druhy.html">Druhý odkaz</a>
<a href="treti.html">Třetí odkaz</a>...
</div>

Po přidání stylu se odkazy zalámají pod sebe:

<style>
.menu a {display: block}
</style>

Vizte též

Visibility = viditelnost prvku, Width = šířka, Height = výška, List-style = vlastnosti seznamu