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.

Chovßnφ seznam∙ v IE 5

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)

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∞

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.