Liste à puces en HTML
Roxane 59
Messages postés
455
Date d'inscription
Statut
Membre
Dernière intervention
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je désirerais savoir si il est possible dans une liste à puces de pouvoir faire le lien en cliquant sur le symbole de la puce, pour moi je l'ai remplacé par une image, au lieu de cliquer sur le texte. Merci du renseignement.
Je désirerais savoir si il est possible dans une liste à puces de pouvoir faire le lien en cliquant sur le symbole de la puce, pour moi je l'ai remplacé par une image, au lieu de cliquer sur le texte. Merci du renseignement.
A voir également:
- Puces html
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
3 réponses
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*/>
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.
--
