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.
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.
ul
{
list-style-type: none;
}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.
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}<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.
ul
{
list-style-type: none;
padding: 0;
margin-left: 1em;
}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).
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
li
{
background-image: url('arrow.gif');
}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.
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
li
{
background-image: url('arrow.gif');
background-repeat: no-repeat;
}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.
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
li
{
background-image: url('arrow.gif');
background-repeat: no-repeat;
background-position: 0 0.4em;
}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.
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;
}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.
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;
}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.
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;
}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.
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;
}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.
.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;
}Remerciements▲
Tous mes remerciements à troumad pour sa relecture.