Puces en images avec les CSS

Première technique : version classique

Code (x)html

Le code pour faire une liste à puces se décline de la façon suivante :

• Les balises <ul></ul> pour déclarer la liste à puces
• Les balises <li></li> qui s'insèrent dans les précédentes pour chaque item.

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

Code CSS

Indiquez dans votre feuille de style externe le code suivant :

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

• font-family, font-size et color stylent la police de caractère utilisée. Ces propriétés ne sont pas nécessaires si elles ont déjà été déclarées dans un élément parent (le body par exemple).
• display:list-item est nécessaire pour faire comprendre au navigateur les list-style-... ;
• list-style-image permet évidemment de déclarer l'image à utiliser comme puce.

Deuxième technique : variante Made-in Sam

L'inconvénient de méthode précédemment décrite est que les images choisies comme puces ne sont pas forcement alignées avec le texte, et pire tous les navigateurs ne positionnent pas ces puces de la même façon...

Pour palier à ce problème, Docteur Sam prescrit de mettre ces images en fond (background-image:url()), d'ajuster la position de l'image par rapport au texte à l'aide de l'attribut background-position:vertical horizontal et d'un petit padding-left pour ne pas que l'image se superpose au texte.

Code CSS

li {
 font-family: Arial, sans-serif;
 font-size: 100%;
 color: black;
 list-style-type: none;
 background-image: url(puce.gif);
 background-repeat: no-repeat;
 background-position: 0 0.32em;
 padding-left: 15px;
} 

Astuce

Afin d'optimiser le code, les trois déclarations de background-... peuvent être synthétisées de la façon suivante :

background: url(puce.gif) no-repeat 0 0.32em;

La potion du Docteur Sam : c'est de la bonne, buvez-en.

Haut