Stylování seznamů

V tomto příkladu testuji pouze CSS vlastnosti, které se k seznamům přímo nevztahují. Text neprošel finální korekturou.

Možnosti stylování seznamů

Seznamem myslím použití tagů <ul>, <ol> a <li>. Pomocí kaskádových stylů se dá ovlivnit:

• druh odrážek pomocí vlastnosti li {list-style-type: a}
• grafické odrážky pomocí li {list-style-image: url('nejaky.gif')}
• odstazení a různé vzdálenosti, o tom je celý následující text

Chování seznamů v IE 5 a 6

• Odsazení puntíku od levého okraje je součtem margin-left u ul a li. Li má margin-left normálně nula, ul má o něco víc.
• Nastavením "ul {margin-left: 0px}" se naprosto skryjí puntíky.
• objeví se při "ul {margin-left: 6px}", což ale platí asi jenom pro IE5. Samozřejmě se jedná o součet u ul a li. Takže 6px je takovou magickou hranicí.
• Pokud se do toho součtu zahrne i margin-left u body, je magickou hranicí 16px.

• Vzdálenost puntíku od textu lze ovlivnit pomocí vlastnosti padding-left u li (nikoliv u ul)
• Neexistuje způsob, jak dát puntík blíže než 6 pixelů.
• Pak ovšem nesmí být nastaveno ul {list-style-position: inside}
• Pokud se použije rámování u li, orámuje se korektně, přičemž do sebe zahrne i padding. Vyplývá z toho, že puntík se umísťuje do marginu elementu.
• Zajímavé je použití odsazení prvního řádku: při použití "li {text-indent: 100px}" se správně odsadil první řádek, ale vzal puntík s sebou.
• Při zapnutí rámečku kolem li se nyní puntík zobrazuje uvnitř boxu! Je to podobné jako při "list-style-position: inside", rozdíl je pouze v dalších řádcích položky. Padding se přitom chová stejně jako margin: dělá okraj vnější.
• Text-indent u ul se projeví stejně jako u li.
• Margin-top a margin-bottom u li (stejně tak padding-*) zobrazuje korektně

IE4

• Zobrazuje velmi shodně, ale puntík zobrazuje v paddingu, ne v marginu. Znamená to, že se nedá nastavit vzdálenost puntíku od textu.

A teď něco o Netscape 4

• Margin u ul zobrazuje korektně
• Vcelku nejzáhadnější je rámování elementu li: Namísto zarámování obsahu položky si vytvoří nad textem obdélníček prázdna, kolem kterého vykreslí rámeček. Zajímavé je, že tento rámeček reaguje na některé věci, které obsah elementu ignoruje (například margin-left).
• Při pokusu aplikovat jakékoliv margin-left na li se margin neprojevil, ale puntík zmizel. (Ten divný rámeček, jak už zmíněno, margin vzal.)
• Padding-left jakékoliv hodnoty se projeví pouze nezobrazením puntíků.
• Jakmile se ale nechá zobrazit ten divný rámeček, padding nezobrazení puntíků nezpůsobí.
• Li {text-indent: 100px} způsobí to samé, co ul {text-indent: 100px}, totiž odsune pouze první řádek celého seznamu, místo aby šoupal s každou položkou. (Zapnutí divnorámečků tento efekt zlikviduje.)
• Margin-top a margin-bottom u li ignoruje, padding-* se projeví opět pouze na tom divném jakorámečku.

Odkaz ven: Listamatic - přehled různých možných stylování seznamů (anglicky)