Page 1 sur 1
listes ety images
Publié : 10 mai 2005, 13:42
par 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.
Publié : 10 mai 2005, 13:58
par Colar
Publié : 10 mai 2005, 14:04
par 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 :
Publié : 10 mai 2005, 15:43
par 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).
Publié : 10 mai 2005, 22:24
par 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
Publié : 10 mai 2005, 22:34
par PsyDk
arno. a écrit :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.
Publié : 10 mai 2005, 22:40
par 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.