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