Discussion :

[darkirby]

Bonjour,
voila j'ai un soucis dans un menu, mon menu est une liste,
cette liste comporte des balises <a> mis en display:block afin d'etre clicable sur toute leur longeur, a l'interieur de ces balises <a> et en + des texte de menu j'ai des puce (image) afin de les placer je me suis dit que j'allais entourer mon texte d'une <div>, y attribuer un float:left et faire de meme avec mes image cependant lorsque je met un <div> dans mon <a>, ie me genere un espace

http://soriaait.free.fr/clients/elwenne/#

je vous poste mes deux partie de code

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
#corps_1 ul a{
	color:#FFFFFF;
	padding: 5px 0 0 10px;
	background-color:#000000;
	width:220px;
	height:22px;
	display:block;
}
 
 
#corps_1 ul li{
	list-style:none;
	border-bottom:1px solid #1E1E1E;
	border-top:1px solid #1E1E1E;
	clear:both;
}
 
 
#corps_1 ul li img{
	float:left;
 
}
#corps_1 ul li div{
	float:left;
}

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<ul>
	<li><a href="#" ><div>Acceuil</div><img src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
	<li><a href="#" ><div>Galeries</div><img src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
	<li><a href="#" ><div>Biographie</div><img src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
	<li><a href="#" ><div>Conditions</div><img  src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
	<li><a href="#" ><div>Livre d'or</div><img src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
        <li><a href="#" ><div>Contact</div><img  src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
	<li><a href="#" ><div>Liens</div><img  src="images/corps/corps_1/puce.jpg" alt="puce" /></a></li>
</ul>

Merci d'avance pour vos réponses

[orphen]

J'aimerai également connaitre la solution a ce problème perso cela m'est déjà arriver j'ai jamais compris d'où ça vient de l'aide de quelqu'un d'autre?

[orphen]

Sommes nous vraiment les seuls à avoir eut ce genre de soucis?

[Erwan31]

Bonjour,
oublie le div, les liens ne peuvent contenir que des éléments inline.
Ensuite, devoir ajouter une image html à chaque item de liste est très lourd au niveau du code. (au passage mieux vaut mettre un alt vide plutôt que alt="puce", puce n'apporte aucune information à l'utilisateur)
Contente toi de ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul>
  <li><a href="#">Acceuil</a></li>
  <li><a href="#">Galeries</a></li>
  <li><a href="#">Biographie</a></li>
  <li><a href="#">Conditions</a></li>
  <li><a href="#">Livre d'or</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Liens</a></li>
</ul>

Puis dans ta CSS par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#corps_1 ul a {background: url(../images/corps/corps_1/puce.jpg) no-repeat right 0.5em; padding-right: 25px
}