Des images à la place des puces de liste

Date de publication : 07/02/2008

Par Russ Weakley (Max Design)
Nicolas Vallée (traducteur) (Home Page)

Cet article est la traduction de Images d'arrière-plan pour les puces écrit par Russ Weakley pour MaxDesign.

Version PDF (Miroir) Version hors-ligne (Miroir)

Pourquoi utiliser des images comme puces ?
I. Créer une simple liste
II. Enlever les puces des listes
III. Enlever les marges intérieures et extérieures
III-a. Ajouter votre propre indentation
IV. Ajouter une image en arrière-plan
V. Empêcher la répétition
VI. Positionner l'image
VII. Déplacer le contenu
A. Variante
A-1. Variante avec un alignement à droite de la liste
A-2. Définissez la largeur de la liste
A-3. Ajouter un espace autour des éléments de la liste
A-4. Les listes d'icônes
Remerciements

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

I. 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.


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

Voir la page à l'étape 1

II. 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


ul
{
  list-style-type: none;
}

Code (X)HTML associé


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

Voir la page à l'étape 2

III. 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


ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Code (X)HTML associé


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

Voir la page à l'étape 3

III-a. 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


ul
{
  list-style-type: none;
  padding: 0;
  margin-left: 1em;
}

Code (X)HTML associé


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

Voir la page à l'étape 3a

IV. 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


ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li
{
  background-image: url('arrow.gif');
}

Code (X)HTML associé


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

Voir la page à l'étape 4

V. 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


ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li
{
  background-image: url('arrow.gif');
  background-repeat: no-repeat;
}

Code (X)HTML associé


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

Voir la page à l'étape 5

VI. 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érences 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 quelque 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


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é


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

Voir la page à l'étape 6

VII. 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


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é


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

Voir la page à l'étape 7

A. Variante

A-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


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é


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

Voir la page à la variante 1

A-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


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é


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

Voir la page à la variante 2

A-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


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é


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

Voir la page à la variante 3

A-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


.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é


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

Voir la page à la variante 4

Remerciements

Tous mes remerciements à troumad pour sa relecture.

Version PDF (Miroir) Version hors-ligne (Miroir)

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

Copyright © 2008 Russ Weakley. 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'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.