28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image dans liste

Bonjour à tous,

Nouvel arrivant sur le forum, j'en profite pour souhaiter à tous une bonne année 2020.

Voici mon problème, je cherche à afficher une page avec plusieurs liste à puces dont les puces sont remplacées par des images différentes pour chaque liste (c'est la m^me image qui est utilisée pour chaque items de la liste). Cela fonctionne sans problème en rajoutant dans le css:
ul {
list-style: none;
list-style-image : url("....../image1.jpg");
}

Par contre cela s'applique tout normalement à toutes les listes. Pour avoir une image différente sur chaque liste j'ai essayé en rajoutant:
<ul list-style-image:="...../image2.jpg">
<li>blabla </li>
</ul>
et bien d'autre essais encore, sans résultat. Seule l'image définie dans le CSS s'affiche. Si je ne mets pas "list-style-image : url("....../image1.jpg");" dans le CSS, aucune image ne s'affiche comme si <ul list-style-image:="...../image2.jpg"> ne fonctionne pas. Je dois me tromper quelque part, mais je ne vois pas où.

Merci d'avance pour votre aide.
Modifié par _laurent (08 Jan 2020 - 23:41)
Modérateur
Salut !

Et bonne année à toi aussi Smiley smile

Alors soit tu veux mettre le CSS dans le HTML comme tu as tenté mais il faut mettre ton style dans l'attribut style :
<ul style="list-style-image:url('....../image1.jpg')">
    <li>blabla </li>
</ul>


Et sinon, plus proprement, tu donnes une classe à ton ul et dans ton css tu attribues les bonnes images :
<ul class="listeA">
    <li>blabla </li>
</ul>
<ul class="listeB">
    <li>blabla </li>
</ul>
<ul class="listeA">
    <li>blabla </li>
</ul>


ul.listeA {
    list-style: none;
    list-style-image : url("....../image1.jpg");
}
ul.listeB {
    list-style: none;
    list-style-image : url("....../image2.jpg");
}


C'est le mieux (et en plus c'est réutilisable, si tu veux plusieurs liste avec la meme image il suffit juste de mettre la classe sur le ul sans tout redéclarer)

Bonne journée !
Modifié par _laurent (08 Jan 2020 - 10:45)
Bonjour,

je t'encourage fortement à utiliser des classes pour mettre en place des styles spécifiques :

ul.fancy-list {
list-style: none;
list-style-image : url("../image1.jpg");
}


(attention au x point que tu as mis au niveau de list-style-image, ce n'est pas correct)

et

<ul class="fancy-list">


Autrement la syntaxe, déconseillé, pour mettre des styles inline et la suivante :

<ul style="list-style: none; list-style-image : url('../image1.jpg');">

Et attention en faisant cela le chemin vers ton image ne sera plus relatif a ta css mais a ton fichier html.
Modifié par _laurent (08 Jan 2020 - 23:41)
Meilleure solution
Merci beaucoup à tous pour vos réponses. Effectivement, en utilisant une class, ç'est Ok.

Bonne journée. Smiley merci
Quand les navigateurs seront un peu plus à jour, tu pourras utiliser les nouveautés de CSS, en particulier la possibilité de définir ses propres listes personnalisées avec @counter. Pour l'instant ce n'est pas réellement utilisable mais ça vaut la peine de commencer à s'y intéresser. Il sera possible aussi de définir ses propres systèmes de numérotation.
Sujet clos
Aller à