Des puces en images

Afin de rendre plus attrayante une liste à puces, l'utilisation des CSS permet de remplacer les traditionnelles puces par des images, de façon extrêmement simple.

Cette technique fonctionne avec les navigateurs modernes : MSIE 5 et +, Netscape 6 et +, Mozilla 1, Opéra 5 et +, etc (Les navigateurs plus anciens affichant une liste à puce classique à la place de la liste personnalisée). Elle utilise les attributs CSS color, display, font-family, font-size et list-style-image.

Source CSS

A placer dans une feuille de style externe ou dans l'en-tête de la page (X)HTML entre des balises <style type="text/css"></style> :

li {
  font-family: serif;
  font-size: 100%;
  color: black;
  display: list-item;
  list-style-image: url(puce.png);
}

Source (X)HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Résultat