Liste des Tutoriaux



Des puces en images

En bref

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.

La solution list-style-image

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

À 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: Verdana, Arial, Helvetica, Geneva, sans-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

3 items de listes précédés d'une puce couleur prune

La solution background-image

L'inconvénient de la méthode précédemment décrite est que les images choisies comme puces ne sont pas forcement alignées avec le texte.

Pour résoudre ce problème, Samuel Latchman 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 padding-left pour que l'image ne se superpose pas au texte.

De plus, il faut bien sûr désactiver les puces par défaut à l'aide de list-style-type:none;.

Source CSS

À 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: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 100%;
color: black;
list-style-type: none;
background-image: url(puce.png);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 15px;
}
    

Les positions background-position:0% 65%; et padding-left:15px; sont évidemment à modifier selon l'image utilisée.

Résultat

Testez le résultat dans votre navigateur.

3 items de liste précédés d'une puce déclarée en image de fond

Une question, une remarque ? Écrivez à l'auteur à pascale.lambert@openweb.eu.org.





Liste des Tutoriaux

Pour vous accompagner dans l'utilisation de vos kits graphiques, Kitgrafik a sélectionné sur le web d'excellents tutoriaux qui abordent les sujets essentiels. Les tutoriaux sont classés par niveau d'expertise et restent sous le copyright de leur auteurs respectifs, que nous remercions. Pour vous perfectionner et découvrir de nouvelles techniques, nous vous recommandons chaudement cette liste RSS de tutoriaux. Nous cherchons en permanence les meilleurs sites de design et nous concentrons leurs derniers tutoriaux ici : 40 superbes tutoriaux du web (RSS) -- New --

Autres ressources

  1. 40 superbes tutoriaux du web (RSS) -- New --
  2. http://normandlamoureux.com/cours/xhtml
  3. http://www.mammouthland.net
  4. http://fr.selfhtml.org/
  5. http:/fr.html.net/tutorials/css/
  6. http://pompage.net/pompe/listes/