Listes à puces en image

Des listes à puces avec des images sont plus attrayantes que les styles donnés par défaut (disc, circle, square). Pour cela, inutile d'incorporer une image à chaque item dans le code (X)HTML. Il y a beaucoup plus simple !

Grâce aux CSS, on peut automatiser facilement la mise en image des listes à puces.

N'hésitez pas à nous faire part de votre avis sur cet article : 2 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

I. Première technique : version classique

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés :
  • color ;
  • display ;
  • font-family ; font-size ;
  • list-style-image ; list-style-position.

I-A. 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.
 
Sélectionnez

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

I-B. Code CSS

Indiquez dans votre feuille de style externe le code suivant :

 
Sélectionnez

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.
Image non disponible

Voir le résultat !

II. Deuxième technique : variante Made-in Sam

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés :
  • background-image ; background-repeat ; background-position ;
  • color ;
  • display ;
  • font-family ; font-size ;
  • list-style-type ;
  • padding.

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, 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 que l'image ne se superpose pas au texte.

II-A. Code CSS

 
Sélectionnez

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 :

 
Sélectionnez

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

Voir le résultat !

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

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 13/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.