ARCHIV

CSS (14.) - Seznam

Dnes se budeme zabývat vlastnostmi umožňující pomocí kaskádových stylů nadefinovat vzhled seznamů.

2.12.2004 15:00 | Vasek | Články autora | přečteno 19787×

V html máme jen omezené možnosti pro nastavení vzhledu seznamu.

Styl značky

Pro nastavení vzhledu odrážek jednotlivých položek seznamu lze nastavit pomocí vlastnosti list-style-type. Jako její hodnota se používají klíčová slova.

Pokud klient nepodporuje daný typ číslování (resp. danou znakovou sadu pro označení písmeny), měl by použít hodnotu decimal. Pokud se vyčerpají znaky nadefinované abecedy, další odrážky se již nezobrazí. Proto je vhodnější pro delší seznamy používat raději číslování něž písmena.

V praxi se musí počítat s tím, že námi definovaný styl odrážek se může zobrazit jinak, než jsme předpokládali. Proto bychom se neměli v textu nikde odkazovat na konkrétní položku seznamu např. viz odstavec atd.

Příklady stylu

Podpora v prohlížečích

NN4 podpora s chybami; Mozilla (Netscape 6+) podpora s chybami; IE podpora s chybami od verze 4; Opera částečně od verze 3; IE 5/MAC částečně od verze 4; Konqueror částečně.

Obrázek pro odrážku

Nastavení obrázku použitého pro odrážku lze provést pomocí vlastnosti list-style-image. Jako její hodnoty se používá uri obrázku.

Používá se pro nastavení dekorativních odrážek seznamu. Obrázek se určuje pomocí uri (nebo-li adresy obrázku). Pokud budete používat relativní adresu obrázku, je potřeba mít na paměti, že musí být relativní k umístění stylového předpisu. Pokud bude obrázek moc velký, vykreslí se jenom jeho horní pravý roh.

Příklad nastavení dekorativní odrážky

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Pozice odrážky

Nastavení pozice odrážky v seznamu lze provést pomocí vlastnosti list-style-position. Jako její hodnota se používají klíčová slova.

Tato vlastnost je další bezproblémovou vlastností kaskádových stylů. Určuje pozici odrážek vůči seznamu.

Příklad umístění odrážky

Podpora v prohlížečích

NN4 nepodporuje, vše vykresluje jako outside; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 5, verze 4 vykresluje odrážku nepřesně při použití hodnoty outside; Opera plná podpora od verze 4; IE 5/MAC špatně; Konqueror plná podpora, při použítí hodnoty outside a vlastnosti display nastavené na hodnotu list-item se nevykresluje zbytek stránky.

Sdružená vlastnost

Sdružená vlastnost list-style umožňuje nastavit všechny předcházející vlastnosti současně.

Jde o úsporný zápis všech vlastností pro pozadí v kaskádových stylech. Všechny vlastnosti sdružené do vlastnosti list-style jsou nejdříve nastavené na výchozí hodnoty, a poté jsou všechny vlastnosti nastavené na hodnoty, které byly nadefinovány ve vlastnosti list-style. Při zadávání jednotlivých hodnot není potřeba dodržet jejich výše uvedené pořadí.

Ekvivalentní zápis

Podpora v prohlížečích

NN4 nedpodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Závěr

Dnes jsme se seznámili s vlastnostmi pro nastavení vzhledu odrážek seznamu pomocí kaskádových stylů.

Verze pro tisk