CSS débutants

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) ?

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;
}

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

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.

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;
}

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