Discussion :

[cilies38]

Bonjour,

J'ai un problème avec mon menu sous ie6. L'affichage est parfait sous FF mais sous ie6 un onglet prend toute la longeur du conteneur 909px;. Je ne spécifie pas de taille à mes éléments li pour qu'il s'ajuste en fonction de la taille du texte et il semblerait que le problème viennent de là pour ie6 (n'importe quoi ce navigateur).
Comment régler ce problème sachant que mon texte du menu a des taille différentes. La solution la plus mauvaise serait de faire une classe pour chaque onglet. Avez-vous une solution autre ?. Merci d'avance

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
27
28
29
30
31
32
33
34
35
36
37
38
#navbar{
background-image: url(images/navbar.png);
height : 55px;
width : 909px;
text-align : center;
}
 
#navbar ul {
margin-left : 40px;
height : 55px;
}
 
#navbar li{
float :left;
height :  55px;
background : url(images/separateur.png) no-repeat;
background-position : left;
list-style-type : none;
overflow : hidden;
}
 
#navbar li a{
color: #666666;
font-size : 11px;
text-align: center;
text-transform: uppercase;
font-weight:bold;
display : block;
height : 38px;
padding : 17px 6px 0px 6px;
}
 
#navbar li a:hover {
background-image : url(images/hover.png);
background-repeat : repeat-x;
margin-left: 2px;
color: #0087c7;
}

Menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="navbar">
		<ul>
			<li><a class='clicked'>Accueil</a></li>
			<li><a>Fonctionnement et mise en place</a></li>
			<li><a>Tarifs</a></li>
			<li><a>Nos engagements</a></li>
			<li><a>Les agences</a></li>
			<li><a>M&C recrute</a></li>
			<li><a>Contact</a></li>
			<li><a>Blog</a></li>
			<li>&nbsp;</li>
 
		</ul>			
	</div>

[Msieurduss]

Je dis peut-être une bêtise, mais si tu ne mets pas de WIDTH et que tu mets un DISPLAY : BLOCK, le problème ne vient-il pas de là ? Il prend toute la largeur...
Si c'est bien le cas : spécifier une width pour les <a>.

[cilies38]

ok ça marche mais comment je fais pour le padding qui est plus pris en compte ?
Merci.

[tzilliox]

Bonsoir cilies38,

chez moi le padding est pris en compte, même lorsque je mets une largeur à mes liens.

Un petit conseil, tu n'es pas obligé de rajouter un <li>&nbsp;</li> à la fin de ta liste pour ajouter un séparateur.
Tu peux le rajouter directement à ton ul :

Code :

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

1
2
3
4
5
6
7
 
#navbar ul {
	margin-left : 40px;
	height : 55px;
	padding-right: 5px /* largeur de ton séparateur*/
	background: url(images/separateur.png) no-repeat top right; /* c'est le right qui est important */
}

Bonne continuation,
Thomas.

[cilies38]

Merci pour le tuyau pour le séparateur.
Mais en ce qui concerne les liens justement je ne mets pas de largeur j'ai juste enlevé le display block et le padding n'est plus pris en compte.
Si quelqu'un sait comment il faut procéder ?
Merci.

[tzilliox]

Rebonsoir cilies38,

les paddings supérieur et inférieurs ne sont pas pris en compte par les éléments inline. Je te propose d'essayer de mettre "display: inline-block" sur tes liens.

De plus, pour centrer verticalement, il existe une méthode plus flexible que le padding supérieur. Il suffit de jouer avec la propriété CSS line-height.

Voici ce que donnerait le code CSS de tes liens :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#navbar li a{
	color: #666666;
	font-size : 11px;
	text-align: center;
	text-transform: uppercase;
	font-weight:bold;
	display : inline-block;
	height : 55px;
	line-height : 55px;
	padding: 0 6px;}

Dis-moi si ça te convient !

Bon courage,
Thomas.

[cilies38]

Salut, merci c'est nickel pas eu besoin de renseigner de largeur est le menu est bien centré et mon code est bien mieux ainsi.

[tzilliox]

Re cilies38,

C'est cool si ça marche !

Juste un dernier conseil : si tu as indiqué une hauteur à tes liens, il est inutile d'indiquer la même hauteur aux li, ul, #navbar.
Tu te répètes, et si un jour tu veux la modifier, ça va t'embêter

Bonne journée,
Thomas.