Obrázek jako odrážka

27. září 2013 CSS Hotová řešení

V CSS je možné přidat textu (seznamu) obrázkovou odrážku, jaké to má úskalí a risika?

Normální pozadí (background-image)
CSS sprite a absolutní posicování

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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

Facebook Twitter

Připomínky mi pište do komentářů ↓