Ajouter une image à mes puces
Résolu
gwenm
Messages postés
640
Statut
Membre
-
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
Salut, je voudrais remplacer ma puce par une image. Mon script se présente comme ceci :
J' ai bien trouvé des tuto pour changer toutes les puces en passant par le css, mais là je veut juste des images sur ce bout de code place dans une page html..Merci pour votre aide ;)
--
La vie n'est pas telle qu'elle devrait être. Elle est comme elle est.
> > C'est la façon dont nous la vivons qui fait la différence.
<div style="width: 160px; float: left; text-align: right; background-color: #fff; padding: 10px;"> <ul> <li style="text-align: left;"><a href="lien" rel="bookmark">titre</a></li> <li style="text-align: left;"><a href="lien" rel="bookmark">titre</a></li> <li style="text-align: left;"><a href="lien" rel="bookmark">titre</a></li> <li style="text-align: left;"><a href="lien" rel="bookmark">titre</a></li> <li style="text-align: left;"><a href="lien" rel="bookmark">titre</a></li> </ul> </div>
J' ai bien trouvé des tuto pour changer toutes les puces en passant par le css, mais là je veut juste des images sur ce bout de code place dans une page html..Merci pour votre aide ;)
--
La vie n'est pas telle qu'elle devrait être. Elle est comme elle est.
> > C'est la façon dont nous la vivons qui fait la différence.
4 réponses
-
Tu as la propriété css list-style-image pour les puces à placer dans les éléments ul
ul {
list-style-image:url('monimage.gif');
}
elle ne prend en compte que le format gif, mais je ne l'utilise plus, je préfère supprimer les images des listes à puce que je vais cibler en supprimant toutes les images
ul { list-style-type: none;}
et j'applique plutôt un background d'image pour mes puces, c'est plus manipulable et tu peux introduire tout format
tu l'introduits au niveau des li et non des ul par contre
li {
background: url('monimage.png') no-repeat left 50% transparent;
padding-left: 16px;
}
du 50% de sorte à ce que ton image de liste à puce soit toujours centré sur sa verticalité
le padding-left afin de pousser le contenu qui sera dans la balise li et faire donc apparaître l'image de background de ta li -
Merci theshadoo, si je fait comme tu me l'explique ca va s'afficher dans tout le site (si j'ai bien compris) hors je voudrais que cela s'applique juste à mon code..
-
Bonjour
Si c'est possible !
Le css peut être pour un type d'élément (ul par exemple) ou à un élément qui aura une certaine classe.
Tu veux mettre ton image pour certaines de tes listes :
HTLM<ul class="liste_custom"> <li>Lien 1</li> <li>Lien 2</li> </ul> <ul> <li>Lien 3</li> <li>Lien 4</li> </ul>
CSSul.liste_custom { list-style-image:url('monimage.gif'); /* J'ai utilisé la 1ere solution de theshadoo au niveau du css, mais tu peux adapter les autres solutions si tu veux */ }
Dans ce cas, ta première liste aura ton formatage de puce, mais pas la deuxième. -
Merci AssassinTourist ;)
J'ai fini par trouver une explication ici https://openweb.eu.org/articles/images_css, mais en cherchant autre chose...comme quoi ;)
