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)