webrebel html css javascript laravel oop php mysql wordpress kurz

Ikonky pri linkoch cez CSS

napísal , 13 Oct 2010 [ CSS ]

Niekedy je dobrý nápad zakomponovať ikonky pri odkazoch cez CSS background, namiesto kombinácie <img> a <a>. Menej písania, menej html elementov, je to kompaktnejšie a pre prípadnú zmenu dizajnu netreba loziť do html.


ikonka cez obrázok: comments awesome comments

<a href="#">
  <img src="comments.png" alt="comments" style="vertical-align: middle; border: 0;"> 
  awesome comments
</a>

V niektorých browseroch podčiarknutie textu zasahuje do samotného obrázku. Vybrať <img> von z <a> by to síce vyriešilo, potom by ale kliknutie na obrázok nefungovalo ako link. Fix:


ikonka cez css: really awesome comments

<a href="#" style="padding-left: 21px; background: url('comments.png') 0px 2px no-repeat;">
  really awesome comments
</a>

Wheee:)

padding-left: 21px je tu potrebný, aby obrázok neprekrýval text - vyhradíme mu 21px na ľavej strane, v nich sa môže realizovať a text nechá na pokoji.

napísal , 13 Oct 2010

čo ty na to?

komentuj