Jak na graficke odrazky v seznamech

li {
list-style-type: none;
background: url(odrazka.png) left center no-repeat;
padding: 0 2em ;
}

Rozměr 2em je orientační, možná bude lepší v px, podle toho, co to bude dělat při změnách velikosti písma.

pokud to chceš dát nahoru, zkus vertical-align:top třeba to pomůže

http://www.jakpsatweb.cz/css/list-style-image.html

Dneska jsem si všiml, že na intervalu vyšlo prakticky totéž. http://css.interval.cz/clanky/vertikalni-obrazkove-menu/
Acci Takovým způsobem to měl ice dělané, viz odkaz. Kdybych neviděl udroják a screenshoty, taky bych odkázal totéž. Zkusil bych umístění "top left", ale to zase bude vypadat blbě při změnách velikosti písma.
Je tu ještě možnost použít obyčekný obrázek a zarovnání vertical-align:center. Sémantika v háji.

Po zkušenostech jsem od list-style-image také upustil a řeším backgroundem jako Radek Hrabůvka.

diky, funguje to, ale ma to jeden problem, kdyz je ta odrazka roztahla na dva radky tak je to ve stredu. Asi se s tim budu muset smirit?

Nemusíš, existuje finta, ale chce to si trošku pohrát. Vezmi si ten kód od Radka Hrabůvky a uprav si ho nějak takto :

li {
list-style-type: none;
background: url(odrazka.png) 0em 0.5em no-repeat;
padding: 0 2em ;
}

Zkrátka si to pozadí trochu posuneš (záleží na nastavené velikosti písma a řádkování, prostě trochu polaboruj s tou hodnotou), mě se osvědčila hodnota 0.4 až 0.5em. Tím dosáhneš toho, že když bude text v seznamu na dvě řádky, odrážka zůstane pěkně nahoře. O nějaký pixelík se liší zobrazení v IE a v Mozille, ale to můžeš doladit třeba kontextovým selektorem takto:

ul>li {
background-position: 0em 0.4em;
}