IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Des images à la place des puces de liste

Cet article est la traduction de Images d'arrière-plan pour les puces dont le but est de vous présenter une technique de remplacement des simples puces de listes par des images.

Cet article a été publié à l'origine en version anglaise et est visible à l'adresse suivante : Background images for bullets

Article lu   fois.

Les deux auteurs

Site personnel

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Pourquoi utiliser des images comme puces ?

Le CSS peut être utilisé pour changer les puces carrées ou rondes, mais cela ne donne qu'un très faible contrôle sur l'apparence et le positionnement.

Les puces en HTML peuvent être remplacées par des images en utilisant la propriété list-style-image. Cependant, le placement de ces images est incohérent dans la plupart des navigateurs web modernes. Il y a ainsi un très faible contrôle sur l'apparence que prendront les puces de liste par rapport aux éléments de la liste.

Une bien meilleure alternative consiste à utiliser des images en arrière-plan des puces. Mais comment y parvenir ?

1. Créer une simple liste

Commençons par une liste simple non ordonnée. Les éléments de la liste sont tous actifs (car encapsulés dans des liens <a href=« # »></a>). Cependant, ce n'est pas essentiel. Dans cet exemple, la balise a « # » est utilisée comme un lien inutile.

 
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

2. Enlever les puces des listes

Pour enlever les puces d'une liste HTML, il suffit de définir la propriété list-style-type à none.

Code CSS enlevant les puces
Sélectionnez
ul
{
  list-style-type: none;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

3. Enlever les marges intérieures et extérieures

Les listes HTML standards possèdent une certaine indentation à gauche, qui varie selon le navigateur. Quelques navigateurs (Mozilla, Netscape, Safari) utilisent des marges intérieures (padding), et d'autres (Internet Explorer, Opera) utilisent des marges extérieures (margin) pour fixer cette indentation.

Pour enlever cette indentation à gauche correctement sur tous les navigateurs, il faudra donc mettre à 0 à la fois le padding et le margin de la balise ul.

Code CSS redéfinissant le padding et le margin
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

3-1. Ajouter votre propre indentation

Si vous avez besoin d'une indentation à gauche, utilisez la propriété margin-left. Comme le padding est désormais fixé à 0, la marge gauche peut être donnée avec une taille exacte qui sera respectée par tous les navigateurs. L'exemple ci-dessous est indenté en utilisant margin-left avec une valeur de 1em.

Code CSS redéfinissant le margin-left
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin-left: 1em;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

4. Ajouter une image en arrière-plan

Les images en arrière-plan sont ajoutées à l'élément li en utilisant la propriété background-image. L'image d'arrière-plan est alors répétée sur chaque élément de la liste (ce qui n'est pas très joli).

Code CSS définissant l'arrière-plan
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
li
{
  background-image: url('arrow.gif');
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

5. Empêcher la répétition

Pour arrêter la répétition de l'image en arrière-plan au niveau des éléments de la liste, définissez la propriété background-repeat à la valeur no-repeat. Il n'y a maintenant plus qu'une seule image par élément de la liste, mais elle a besoin d'être mieux positionnée.

Code CSS définissant la répétition de l'image
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

6. Positionner l'image

La propriété background-position est utilisée pour placer les images afin qu'elles soient alignées avec le texte. Dans notre cas, nous la définirons à la valeur 0.4em. Ces unités font référence aux positions de l'image depuis le coin en haut à gauche.

La position haute (top) peut être définie à 50 %, ce qui peut correspondre au milieu de l'élément de la liste. Cependant, l'apparence est disgracieuse si les éléments de la liste sont placés sur deux lignes ou plus, car l'image sera centrée au milieu de ces lignes. La méthode la plus sûre pour définir la position haute est donc l'utilisation des em. Avec cette technique, les images resteront toujours à la même position, quelle que soit la taille de la police utilisée par l'utilisateur. Les dimensions actuelles utilisées pour la position gauche (left) et la position haute (top) dépendent de l'image.

Les images sont désormais alignées horizontalement avec le contenu. Cependant le contenu chevauche les images.

Code CSS définissant la position de l'image
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 0 0.4em;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

7. Déplacer le contenu

Pour déplacer le contenu hors des images en arrière-plan, il faut utiliser la propriété padding-left sur les éléments li. Dans notre cas, la valeur sera 0.6em. En ce qui concerne l'alignement vertical, cela dépendra de la taille de votre image.

C'est terminé !

Il existe plusieurs variantes de cette méthode sur une liste simple.

Code CSS final
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 0 0.4em;
  padding-left: 0.6em;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

8. Variante

8-1. Variante avec un alignement à droite de la liste

Si vous souhaitez aligner à droite votre liste, il suffit d'appliquer trois changements. Tout d'abord, définissez la propriété text-align de la balise ul à la valeur right. Ensuite, changer la propriété gauche de background-position de la valeur 0 à 100 % (ce qui alignera l'image sur le côté droit). Enfin, changer le padding-left en padding-right.

Code CSS
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 100% 0.4em;
  padding-right: 0.6em;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

8-2. Définissez la largeur de la liste

Si la liste ne convient pas à la boîte la contenant, vous pouvez utiliser la propriété width de l'élément ul pour contrôler la largeur totale de la liste.

Code CSS
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
  width: 10em;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 100% 0.4em;
  padding-right: 0.6em;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

8-3. Ajouter un espace autour des éléments de la liste

On peut ajouter de la place entre les éléments de la liste en définissant une marge sur les éléments li. Les marges peuvent être définies pour le haut, le bas, ou le haut et le bas de chaque élément de la liste. Cette version a une marge de 1em en haut et en bas de chaque élément de la liste.

Code CSS
Sélectionnez
ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
  width: 10em;
}
 
li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
  background-position: 100% 0.4em;
  padding-right: 0.6em;
  margin: 1em 0;
}
Code (X)HTML associé
Sélectionnez
<ul>
   <li><a href="#">Lait</a></li>
   <li><a href="#">Oeufs</a></li>
   <li><a href="#">Fromage</a></li>
   <li><a href="#">Salade</a></li>
   <li><a href="#">Fruit</a></li>
</ul>

8-4. Les listes d'icônes

On peut utiliser des options pour avoir des images d'arrière-plan différentes dans la même liste. Pour cela, il suffit de créer une classe pour chaque icône, et de donner un style à chaque élément li.

Code CSS
Sélectionnez
.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
li.pdf
{
  background-image: url('bullet_pdf.gif');
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}
 
li.doc
{
  background-image: url('bullet_doc.gif');
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}
 
li.text
{
  background-image: url('bullet_text.gif');
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}
 
li.htm
{
  background-image: url('bullet_htm.gif');
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}
Code (X)HTML associé
Sélectionnez
<ul class="iconlist">
   <li class="pdf"><a href="#">Lait</a></li>
   <li class="text"><a href="#">Oeufs</a></li>
   <li class="htm"><a href="#">Fromage</a></li>
   <li class="doc"><a href="#">Salade</a></li>
   <li class="text"><a href="#">Fruit</a></li>
</ul>

Remerciements

Tous mes remerciements à troumad pour sa relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2008 Russ Weakley. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.