Des puces en images

Openweb.eu.org > Articles  > Des puces en images

Abstract

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.

Article

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

Testez le résultat dans votre navigateur.

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. Il faut aussi 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;
}

La partie de ce code concernant le background peut par ailleurs être optimisé de la façon suivante :

background: url(puce.png) no-repeat 0% 65%

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

Cette solution sympathique présente elle aussi, hélas, deux inconvénients :

  1. La désactivation des puces par défaut pose des problèmes d'accessibilité ;
  2. Si l'item fait plus d'une ligne, l'alignement vertical de l'image se fera sur la hauteur totale de l'item, et ne sera donc pas aligné avec la première ligne. Pour éviter ce désagrément, on peut utiliser l'unité em au lieu des %.

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant
  • Thème : Mise en page
  • Auteur :
  • Publié le :
  • Mise à jour : 2 mars 2009

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom