List-style-image

CSS vlastnost list-style-image urΦuje obrßzek mφsto odrß╛ky.

Z obrßzku se (pokud bude moc velk²) vykreslφ jenom hornφ prav² roh (netestovßno). Pokud mß prohlφ╛eΦ vypnutΘ obrßzky nebo dokud se obrßzek nestßhne, bude vzhled odrß╛ky urΦen vlastnostφ list-style-type.

Adresa obrßzku se zadßvß jako jinß url v css zßpisem nap°. list-style-image: url("obrazek.gif"). Adresa m∙╛e b²t absolutnφ i relativnφ.

Obrßzek odrß╛ky se dß nastavit spolu s jin²mi vlastnostmi seznamu souhrnnou vlastnostφ list-style.

V praxi je docela t∞╛kΘ ud∞lat hezk² obrßzek pro odrß╛ku. Obzvlß╣t∞ problematick² je fakt, ╛e ka╛d² prohlφ╛eΦ m∙╛e odrß╛ku umφstit o pßr pixel∙ v²╣e nebo nφ╛e.

Podpora

P°φklady

Pouze jednu odrß╛ku lze zm∞nit p°φm²m stylem:

<ul>
<li style="list-style-image: url('cesta/obrazek.gif')">text za grafickou odrß╛kou</li>
</ul>

Mnohem Φast∞ji se ale grafickß odrß╛ka dßvß v╣em tag∙m <li> na celΘ strßnce:

li {list-style-image: url("cesta/obrazek.gif")}

nebo se obrßzkovß odrß╛ka dßvß jenom tag∙ <li> uvnit° neΦφslovanΘho seznamu = tagu <ul> (unordered list). Pokud budou unit° ΦφslovanΘho seznamu <ol> (ordered list), obrßzek mφt nebudou:

ul li {list-style-image: url("cesta/odrazka.gif")}

Zßpis ul li je platn² pro v╣echny tagy <li> uvnit° tagu <ul>.

Velmi Φasto se lze setkat s po╛adavkem dßt obrßzkovΘ odrß╛ky jenom n∞kterΘmu seznamu odrß╛ek a jin²m odrß╛kßm ve strßnce obrßzkovou odrß╛ku nedßvat. To je nejlep╣φ vy°e╣it t°φdou (class) p°idanou tagu <ul>. Potom zßpis selektoru ul.obrazkova li ovlivnφ tag li v tagu ul s t°φdou obrazkova:

<style>
ul.obrazkova li {list-style-image: url("cesta/odrazka.gif")}
</style>
<ul class="obrazkova">
<li>tento text mß p°ed sebou grafickou odrß╛ku</li>
<li>tento takΘ</li>
</ul>
<ul>
<li>text s normßlnφ grafickou odrß╛kou</li>
<li>proto╛e nad°azenΘ ul nemß class="obrazkova"</li>
<ul>

Vizte tΘ╛

List-style = vlastnosti odrß╛ek, List-style-position = umφst∞nφ odrß╛ky, URL v CSS = zßpis adresy obrßzku