CSS Débutants

Vous êtes ici > CSS débutants | Puces CSS

Puces en gifs avec les CSS

Version classique

Fonctionne avec :

FireFox
IE 5.x et +
NS 6/7
Mozilla 1.x
Opéra 5.x et +
Safari

Attributs utilisés:

color
display
font-family ; font-size
list-style-image ; list-style-position

Comment faire une liste à puces avec les styles dont les puces sont des images (.gifs, .png, .jpg) ?

Code CSS :

Indiquez dans votre feuille de style externe le code suivant :

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

Code (x)html :

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

Résultat :

liste 1
liste 2
liste 3

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. On le voit d'ailleurs très bien ci-dessus.

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

Code CSS

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