Ajouter une image à mes puces
Résolu/Fermé
gwenm
Messages postés
594
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
17 mai 2024
-
14 déc. 2012 à 17:44
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 18 janv. 2013 à 09:55
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 18 janv. 2013 à 09:55
A voir également:
- Ajouter une image à mes puces
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Ajouter une signature sur word - Guide
- Ajouter un compte gmail - Guide
4 réponses
theshadoo
Messages postés
786
Date d'inscription
samedi 26 mai 2007
Statut
Membre
Dernière intervention
3 mai 2016
123
14 déc. 2012 à 18:36
14 déc. 2012 à 18:36
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
gwenm
Messages postés
594
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
17 mai 2024
30
14 déc. 2012 à 18:41
14 déc. 2012 à 18:41
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..
theshadoo
Messages postés
786
Date d'inscription
samedi 26 mai 2007
Statut
Membre
Dernière intervention
3 mai 2016
123
14 déc. 2012 à 18:56
14 déc. 2012 à 18:56
des images pour les puces juste sur ton code ???? donc en fait sur une partie où tu auras n'importe quel type de langage de code inséré ? tu veux remplacer les numéro de ligne du coup ? du genre :
1. <?php
2.
3. echo "hello";
4.
5. ?>
1. <?php
2.
3. echo "hello";
4.
5. ?>
gwenm
Messages postés
594
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
17 mai 2024
30
14 déc. 2012 à 19:10
14 déc. 2012 à 19:10
je comprend pas .. tu pense que c'est pas possible en fin de compte d'intégrer une image a mes puces juste pour ce code? Ou alors, si, en intégrant un petit code php dans ma page?
theshadoo
Messages postés
786
Date d'inscription
samedi 26 mai 2007
Statut
Membre
Dernière intervention
3 mai 2016
123
17 janv. 2013 à 23:33
17 janv. 2013 à 23:33
J'ai jamais dit que c'était pas possible, j'ai demandé ce que tu désirais avec précision lol, oui c'est possible, utilise les listes à puce numéroté ol pour chaque ligne c'est tout, après en css tu peux choisir le format de numéro d'affichage que tu souhaites
AssassinTourist
Messages postés
5710
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 311
4 janv. 2013 à 17:22
4 janv. 2013 à 17:22
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.
gwenm
Messages postés
594
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
17 mai 2024
30
Modifié par gwenm le 4/01/2013 à 18:20
Modifié par gwenm le 4/01/2013 à 18:20
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 ;)
AssassinTourist
Messages postés
5710
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 311
18 janv. 2013 à 09:55
18 janv. 2013 à 09:55
Tant mieux =)
