Tło dla odnośnika

czwartek, 08 06 2006 | Kategoria: Technologia

Bardzo często twórcy stron umieszczają przy odnośnikach różnego rodzaju obrazki. Na przykład kolorowe strzałki w menu, czy ikonki o kształcie dokumentu przy linkach prowadzących do artykułów.

W jaki sposób można wykonać coś takiego? Można umieścić obrazek obok odnośnika. Wtedy nie będzie on jednak klikalny. Można także umieścić go wewnątrz odnośnika, ale poskutkuje to dużym bałaganem w kodzie. Poza tym – dlaczego mielibyśmy zaśmiecać nasz kod HTML elementami, które mają jedynie wartość dekoracyjną?

Jak więc rozwiążemy ten problem? Wykorzystamy CSS – nadamy odnośnikowi tło i wewnętrzny odstęp. O proszę:

a {padding-left: 18px;
     background: url(ikonka.gif) no-repeat center left
}

Nasz tło będzie umieszczone z lewej strony, w środku wysokości i nie będzie powtarzane. Zapraszam do obejrzenia gotowego przykładu.

Update: do przykładu zakradł się mały chochlik. Oczywiście odnośnika nie trzeba przekształcać w blokowy, aby nadać mu padding. Można to zrobić na przykład w sytuacji, gdy chcemy nadać odnośnikowi dodatkowy margines.

Podobne artykuły:

Komentarze (0)

Dodaj komentarz