list-style-image CSS propriété

Définition de la CSS list-style-image.

La propriété de Liste CSS list-style-image permet de mettre une image à la place du marqueur d'item de liste défini par list-style-type.

list-style-image : url(/img/style_css/puce.gif);
list-style-image : none;

La propriété de feuille de style list-style-image CSS peut prendre la valeur de :

• url(url_image) : met une image à la place du marqueur d'item de liste.
• none : aucune image à la place du marqueur d'item de liste.
• inherit : hérite de la propriété CSS list-style-image de son parent (CSS2).

Exemple de code list-style-image CSS

Conditions d'application de la CSS list-style-image.

La propriété CSS list-style-image est applicable sur les balises HTML ou XHTML ayant pour valeur display:list-item.
La propriété CSS list-style-image peut s'appliquer directement sur la balise HTML ou XHTML LI, UL, OL.

La valeur de la CSS list-style-image peut être mise directement dans la propriété de raccourci CSS list-style.

Héritage des valeurs Css de list-style-image.

Les balises filles HTML ou XHTML héritent de la propriété CSS list-style-image.

Problème d'interprétation de list-style-image en Css.

La propriété CSS list-style-image pose un problème au niveau du positionnement de l'image qui varie suivant le navigateur < 2010.
Attention lorsque vous utilisez des feuilles de styles externes, netscape 4.7 prend comme point de départ de l'url l'endroit où se trouve la feuille de style alors que Internet Explorer prend comme origine la page html.
Donc si votre feuille de style est dans un autre dossier mettez soit :

• une url absolue (http://www.mon.site/image/fond.gif).
• une url relative à la racine du site(/image/fond.gif).