Rechercher : dans
Par :

Liste à puces en HTML

Dernière réponse le 2 nov 2007 à 23:00:39 Roxane 59, le 2 nov 2007 à 13:30:54 
 Signaler ce message aux modérateurs

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.

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « Liste à puces en HTML » dans :
[Windows] Obtenir la liste des fichiers d'un dossier VoirLister le contenu d'un dossier Voici une astuce simple qui permet de lister le nom des fichiers contenus dans un répertoire. Vous pourrez obtenir en un clic les titres de vos chansons, de vos photos, etc. dans un fichier...
Espace en HTML VoirEn HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace...
Télécharger HTML Tidy VoirHTML Tidy est un utilitaire permettant de vérifier et d'optimiser tout code HTML. La version originale de cet utilitaire s'utilise en mode de commande uniquement. La présente version, appelée "GUI Tidy", possède une interface graphique. Notez...
Listes et énumérations en HTML VoirLes listes Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML définit trois types de listes : La liste ordonnée ; La liste non ordonnée ; La liste de définition. Liste ordonnée Conteneur Type de...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Caractères spéciaux HTML VoirCodage des caractères spéciaux Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour...

1

Gihef, le 2 nov 2007 à 14:07:54

Bonjour,

“je l'ai remplacé par une image”
Comment as-tu fait ?

Donne le code. HTML et CSS.

--

Répondre à Gihef

2

Roxane 59, le 2 nov 2007 à 14:55:25

Voila ce que j'ai fait mais la largeur de l'mage 20px par 20px maxi, Cela me remplace la puce.

.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*/>

Répondre à Roxane 59

3

 Gihef, le 2 nov 2007 à 23:00:39

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 :

  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.


--

Répondre à Gihef
Collection CommentÇaMarche.net