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.
Reklama
