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