Ajouter une image à mes puces
Résolu
gwenm
Messages postés
594
Date d'inscription
Statut
Membre
Dernière intervention
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 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 ;)
<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 ;)
A voir également:
- Ajouter une image à mes puces
- Image iso - Guide
- Ajouter une légende à une image word - Guide
- Ajouter une signature sur word - Guide
- Ajouter à l'écran d'accueil iphone - Guide
- Ajouter une liste déroulante excel - Guide
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
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
CSS
Dans ce cas, ta première liste aura ton formatage de puce, mais pas la deuxième.
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>
CSS
ul.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 ;)
J'ai fini par trouver une explication ici https://openweb.eu.org/articles/images_css, mais en cherchant autre chose...comme quoi ;)