listes ety images

[arno.]

Bonjour,
je souhaiterais faire une liste avec des <li>, mais je voudrais que les petits ronds ou étoiles (je ne sais plus leur nom) soient de petites images (16x16). Est-ce possible à l'aide de CSS ? Si oui quelle est la meilleure piste à suivre.
merci beaucoup.

[Colar]

http://www.siteduzero.com/xhtml-css/listes.php#css

Code : Tout sélectionner

ul
{
   list-style-image: url("image.png");
}

[arno.]

ah oui, excuse moi, j'ai oublie de préciser quelque chose.
Je souhaiterais que l'image soit différente pour chaque item de la liste.
c'est possible de mettre quelque chose qui ressemble à ça :

Code : Tout sélectionner

ul
{
   list-style-image: url("image.png");
}

[PsyDk]

1re solution :

Code : Tout sélectionner

<ul>
	<li>aubergine</li>
	<li>courgette</li>
	<li>tomate</li>
	<li>poivron</li>
</ul>

Code : Tout sélectionner

li { list-style-image: url('aubergine.png'); }
li+li { list-style-image: url('courgette.png'); }
li+li+li { list-style-image: url('tomate.png'); }
li+li+li+li { list-style-image: url('poivron.png'); }

Le balisage n'est pas pollué, mais cette méthode ne fonctionne qu'avec des navigateurs modernes.

2e solution :

Code : Tout sélectionner

<ul>
	<li id="LiAubergine">aubergine</li>
	<li id="LiCourgette">courgette</li>
	<li id="LiTomate">tomate</li>
	<li id="LiPoivron">poivron</li>
</ul>

Code : Tout sélectionner

#LiAubergine { list-style-image: url('aubergine.png'); }
#LiCourgette { list-style-image: url('courgette.png'); }
#LiTomate    { list-style-image: url('tomate.png'); }
#LiPoivron   { list-style-image: url('poivron.png'); }

Cette méthode encrasse un peu le balisage, mais fonctionne avec les navigateurs obsolètes (enfin, pas trop non plus).

[arno.]

merci pour ta réponse.
et

Code : Tout sélectionner

<ul>
   <li style="list-style-image: url('aubergine.png');">aubergine</li>
   <li style="list-style-image: url('courgette.png');">courgette</li>
   <li style="list-style-image: url('poivron.png');">poivron</li>
   <li style="list-style-image: url('tomate.png');">tomate</li>
</ul>

ce n'est pas bon

[PsyDk]

merci pour ta réponse.
et

Code : Tout sélectionner

<ul>
   <li style="list-style-image: url('aubergine.png');">aubergine</li>
   <li style="list-style-image: url('courgette.png');">courgette</li>
   <li style="list-style-image: url('poivron.png');">poivron</li>
   <li style="list-style-image: url('tomate.png');">tomate</li>
</ul>

ce n'est pas bon

Si mais c'est un peu hard trash médiéval de fixer le style en dur. C'est toujours mieux d'avoir tout ça dans un fichier CSS à part.

[arno.]

merci pour ta réponse. Bon finalement, je vais me la jouer hard trash médiéval alors. Je pense que c'est plus simple pour moi dans la mesure où c'est un wiki et où je n'ai pas accés à la feuille de style de toutes manières.