O webu
Obrázková odrážka

Kaskádové styly používají k obrázkové odrážce vlastnost list-style-image s adresou obrázku zadaného do url().

element {list-style-image: url(odrazka.png)}
  • Text s obrázkovou odrážkou,
    může být i
    víceřádkový.
  • U obrázkové odrážky vytvořené přes list-style-image lze měnit umístění.
  • Prohodit umístění odrážky (list-style-position)

Jak je vidět, nastavit přesnou posici obrázku pro list-style-image odrážku není možné. Dosáhnout přibližného zarovnání lze docílit nastavením line-height shodného s výškou obrázkové odrážky. Jelikož je ale možné text na webu zvětšovat, za moc toto řešení nestojí.

Normální pozadí (background-image)

Z výše popsaných důvodů se nabízí používat obyčejné obrázkové pozadí:

  • Seznamu <ul> nebo <ol> se odrážky zruší:

    ul {list-style: none}
  • Položkám se přidá levý padding o šířce obrázku + něco málo navíc jako odsazení:

    li {padding-left: 30px}
  • Položkám ne nastaví neopakující se obrázek (no-repeat):
    li {background: url(odrazka.png) no-repeat}
  • Text s obrázkovou odrážkou,
    může být i
    víceřádkový.
  • U obrázkové odrážky vytvořené přes background lze měnit umístění.
  • Změnit umístění odrážky (background-position)

CSS sprite a absolutní posicování

Máme-li na stránce kvůli rychlejšímu načítání obrázky spojené do jednoho (tzv. CSS sprite) a nechceme-li odrážku vyčlenit do zvlášť souboru, nezbývá než posicovat.

<ul>
  <li><span class="css-obrazek odrazka"></span> Text
</ul>
li {position: relative; padding-left: 30px}
.odrazka {position: absolute; left: 0; top: 0}

Pro vycentrování doprostřed řádku stačí použít běžné centrování, kdy se odrážka umístí na 50% a polovina výšky obrázku se odečte záporným marginem.