List-style-image
CSS vlastnost list-style-image určuje obrázek místo odrážky.
| hodnoty | obrázková odrážka |
|---|---|
| none | odrážka nebude obrázková (vzhled bude určen hodnotou list-style-type) |
| url("adresa.obrazku") | místo odrážky bude zvolený obrázek |
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
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | 4, 5, 5.5, 6 | |
| Firefox | všechny verze | |
| Opera | 4, 5, 6, 7 | |
| Chrome | ano |
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>
Pozice obrázku
Jarda Svoboda mi napsal, ještě jsem to netestoval:
Jak dostat obrázek na střed řádku, jelikož je moc nahoře v IE a Opeře. Za použití zápisu
li {margin:8px 0px; font-size:12px; line-height:8px; }
lze pomocí line-height "pozicovat" vertikálně list-style-image a pomocí marginu dolaďovat "výšku řádku".
Reklama
