CSS vlastnost list-style-position určuje, jestli bude odrážka v textu nebo vedle něj.
hodnoty | pozice odrážky |
---|---|
outside | odrážka je umístěna vlevo od bloku textu, řádky začínají pod sebou |
inside | odrážka je umístěna hned vedle textu, takže druhý řádek je i pod odrážkou |
Outside je normální hodnota odrážky. Odrážkami myslím grafické značky vedle tagů <li> v nečíslovaném (<ul>) nebo číslovaném seznamu (<ol>). Hodnota inside se v praxi téměř nepoužívá, asi protože neodsazený druhý řádek vypadá hnusně.
Lépe lze vyladit pozici odrážky pomocí vlastností margin-left, padding-left a text-indent. Ale není to žádná sláva, protože okraje různých objektů seznamů (ol, ul, li) počítá každý prohlížeč úplně jinak. Explorer chápe levý okraj jako margin prvku ul (ale pouze v případě, že se použije list-style-position: outside nebo bez hodnoty), Mozilla jako padding prvku ul. Netuším, kterou vlastností stanovuje Explorer levý okraj seznamu, použije-li se list-style-position: inside. Předem varuji před různým hraním -- vyladit seznam (zejména obrázkový) tak, aby vypadal ve všech moderních prohlížečích stejně, je pěkná dřina a osobně si vůbec nejsem jistý, zda je to vůbec možné udělat.
Při nastavení list-style-position: inside se odrážka (případně obrázek odrážky) stává součástí elementu <li>, ale zachovává si nějaký odstup od textu (lepí se na levý okraj). Pokud se nastaví obrázková odrážka (list-style-image), v Mozille se lepí na levý okraj a je na středu řádku (což je v pohodě), ale v Exploreru a v Opeře se lepí na text a je moc nahoře (nic nepomáhá).
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
4, 5, 5.5, 6 | IE 4 kreslí odrážku přes rámeček při hodnotě outside (Pixy) | |
Mozilla (Netscape 6+) | všechny verze | |
Opera | 4, 5, 6, 7 | |
Konqueror | ano | při hodnotě inside a display: list-item nevykreslí zbytek stránky (Pixy) |
IE 5 / Mac | špatně | |
Netscape Navigator 4 | ne | všechno kreslí jako outside |
Přímý zápis zanořené odrážky:
<ul>
<li style="list-style-position: inside">text za zanořenou odrážkou</li>
</ul>
Jinak je to fakt na nic.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.