Liste à puces en HTML
Fermé
Roxane 59
Messages postés
411
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
5 novembre 2008
-
2 nov. 2007 à 13:30
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 2 nov. 2007 à 23:00
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 2 nov. 2007 à 23:00
A voir également:
- Liste à puces en HTML
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Editeur html - Télécharger - HTML
- Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
- Liste de diffusion whatsapp - Guide
3 réponses
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
2 nov. 2007 à 14:07
2 nov. 2007 à 14:07
Bonjour,
“je l'ai remplacé par une image”
Comment as-tu fait ?
Donne le code. HTML et CSS.
--
“je l'ai remplacé par une image”
Comment as-tu fait ?
Donne le code. HTML et CSS.
--
Roxane 59
Messages postés
411
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
5 novembre 2008
19
2 nov. 2007 à 14:55
2 nov. 2007 à 14:55
Voila ce que j'ai fait mais la largeur de l'mage 20px par 20px maxi, Cela me remplace la puce.
Tu me tient au courant, je débute i.element_menu ul/*Toutes les listes à puces se trouvant dans un menu*/>
.element_menu ul/*Toutes les listes à puces se trouvant dans un menu*/
{
list-style-image:url("images/bouton.gif");/*On change l'apparence des puces*/
padding:0px;/*Tout les côtés ont une marge intérieur de 0 pixels*/
padding-left:30px;/*...mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20pixels*/
margin:0px;/*Idem pour margin, ça nous évite d'avoir à en écrire 4(margin-left, margin-right...)*/
margin-bottom:5px;/*Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais
tous les autres sont à 0 px*/
}
<body>
<div id="en_tete"><!--Case vide pour le moment voir avec le CSS-->
</div>
<div id="menu"><!--Cadre englobant tous les sous-menus 'en bleu marine sur le schéma)-->
<div class="element_menu"><!--Cadre correspondant à un sous-menu -->
<h3>Titre menu</h3><!--Titre du sous_menu-->
<ul><!--Texte du premier menu-->
<li><a href="page1.html"><acronym title="La maison de Pépé !">La maison
</acronym></a></li><!--Liste du sous_menu-->
<li><a href="page2.html"><acronym title="Cliquez pour voir">
Une surprise</acronym></a></li>
<li><a href="formulaire.html">Lien</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Titre menu</h3><!--Texte du second menu-->
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
</div>
</body>
Tu me tient au courant, je débute i.element_menu ul/*Toutes les listes à puces se trouvant dans un menu*/>
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
2 nov. 2007 à 23:00
2 nov. 2007 à 23:00
C'est possible.
Mais en s'y prenant autrement.
Sans list-style-image.
Tu peux le faire en utilisant une image d'arrière-plan dans les liens.
Par exemple :
Comme tu sembles avoir déjà assimilé l'utilisation des listes et plutôt qu'un long discours, je te propose de tester cet exemple dans lequel j'ai ajouté un effet sur les puces en image.
--
Mais en s'y prenant autrement.
Sans list-style-image.
Tu peux le faire en utilisant une image d'arrière-plan dans les liens.
Par exemple :
background : url(images/bouton.gif) no-repeat 0 0;L'image étant dans les liens, elle est “cliquable”.
Comme tu sembles avoir déjà assimilé l'utilisation des listes et plutôt qu'un long discours, je te propose de tester cet exemple dans lequel j'ai ajouté un effet sur les puces en image.
--
