28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage menu horizontal sous IE

Bonsoir,

J'ai un gros soucis de décalage d'un menu horizontal que j'ai fait, sous IE

ce menu comporte une image de fond qui fait l'image off et l'image hover (survol). Ces propriétés sont de : Largeur : 120px - hauteur : 70px

http://www.simbios.ch/themes/simbios_test/images/nav_butt.png

son code CSS :

ul#menu_header
{

	margin: 0 ;
	padding : 65 0 0 0 ;
	list-style-type: none ;
}

ul#menu_header li
{

	margin: 0 0 0 0 ;
	padding: 0 ;
}

ul#menu_header li a
{
	float : right;
	width: 120px ;
	line-height: 35px ;
	color: black;
	font-weight:bold;
	text-align: center ; 
	text-decoration: none ;
	background: url('../images/nav_butt.png')  0 0 ; 
}

ul#menu_header li a:hover
{
	background: url('../images/nav_butt.png') no-repeat 0 -35px ;
	color: #000;
	font-weight:bold;
}


Comme on peut le voir, je donne la moitié de la hauteur pour afficher le bouton off (line-height: 35px Smiley cligne , ensuite au survol, je décale contre le bas de 35px pour afficher le bouton en survol.

Le code html :
		
<ul id="menu_header">
			<li><a href="download.php">Téléchargements</a></li>
			<li><a href="forum.php">Forums</a></li>
			<li><a href="sections.php">Sections</a></li>
			<li><a href="radios.php">Radios Online</a></li>
			<li><a href="index.php">Accueil</a></li>
</ul>


Le problème en image :

sous Firefox, nickel...
http://www.simbios.ch/temp/img/menu_ff.png

Sous IE, la cata...
http://www.simbios.ch/temp/img/menu_ie.png

D'avance je vous remercie pour votre aide.

Salutations
Modifié par skippy (11 Oct 2009 - 15:03)
Bonsoir,

C'est un effet du au contexte de formatage ou layout pour IE.

Tes li n'englobe pas tes liens flottants .

Il vaut mieux que tu mettes tes listes en flottantes avec une dimension , puis tes liens en display:block;

Pour les effets secondaire sur les element sous ton menu , ou l'aspect (fond/bordures de ton ul ) voir , contexte de formatage , clear ...

GC
heu...j'avoue ne rien comprendre du tout Smiley rolleyes

Quand tu parles de liens flottant, j'ai pourtant bien mis mon menu en float:right et avant j'avais bien mis une valeur de hauteur, ainsi que display:block

Ensuite quand tu parles de formatage, je ne comprend pas non plus
re , Smiley smile

desolé :
ul#menu_header li 
{ 
 
    margin: 0 0 0 0 ; 
    padding: 0 ; 
}


tes li ne sont pas flottantes (et denué de contexte de formatage , ton ul : idem).

Que se passe t-il ? :
Elles n'englobent pas les liens qui eux flottent (c'est comme si elles etaient vides).
Elles font zero pixels de hauteurs , et ailleurs que dans IE , aucun decallage n'apparait.
IE applique par defaut 1em de hauteur a un element de type block.
Chaque element flottant effectue un retour a la ligne si l'élément le précédent ne flotte pas . "Tes li ne flottent pas et fond 1em de hauteur dans IE d'ou le decallage , ensuite comme le precedent lien depasse toujours de son conteneur (li) , le nouveau vient buter dessus .

Fait donc flotter tes li comme indiquer precedement et teste ( puis fait une petite recherche sur les contextes de formatages , flottants et clear:both; par exemple ) .

C'est un probleme recurrent Smiley smile .

GC
ok.

Le problème c'est que si je met cet élément en flottant ca marche sous ie et plus sous ff

sous ie :
ul#menu_header li
{	
	display: block;
	float : right;
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on d&#65533;init une marge basse de 5px pour a&#65533;er le tout */
}

ul#menu_header li a
{
	width: 120px ;
	height: 35px;
	line-height: 35px ;
	color: black;
	font-weight:bold;
	text-align: center ; 
	text-decoration: none ;
	background: url('../images/nav_butt.png')  0 0 ; /* On met une image de background, que l'on positionne &#65533;0px du bord gauche et 0px du bord haut */
}


et pour ff :
ul#menu_header li
{	
	display: block;
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on d&#65533;init une marge basse de 5px pour a&#65533;er le tout */
}

ul#menu_header li a
{
	float : right;
	width: 120px ;
	height: 35px;
	line-height: 35px ;
	color: black;
	font-weight:bold;
	text-align: center ; 
	text-decoration: none ;
	background: url('../images/nav_butt.png')  0 0 ; /* On met une image de background, que l'on positionne &#65533;0px du bord gauche et 0px du bord haut */
}


Je ne sais comment m'y prendre
Modifié par skippy (09 Oct 2009 - 23:43)
bon j'y suis allé avec les hacks, mais est-ce propre ? 


ul#menu_header
{
	margin: 0 ;
	padding : 65 0 0 0 ;
	list-style-type: none ;
}

ul#menu_header li
{	
	display: block;
	float : right;
	margin: 0 0 0 0 ;
	padding: 0 ;
}

ul#menu_header li a
{

	float : right !important;
	float:none;
	width: 120px ;
	height: 35px;
	line-height: 35px ;
	color: black;
	font-weight:bold;
	text-align: center ; 
	text-decoration: none ;
	background: url('../images/nav_butt.png')  0 0 ; 
}

ul#menu_header li a:hover
{
	background: url('../images/nav_butt.png') no-repeat 0 -35px ; 
	color: #000;
	font-weight:bold;
}


Merci pour l'aide
À ta place, j'inverserais l'ordre d'apparition des liens dans le code source et ferais flotter les éléments li à gauche et non à droite. En outre, lorsque tu fixes des valeurs numériques autres que 0, prends toujours soin d'en préciser l'unité (quand je lis 65 0 0 0, cela veut-il dire 65px 0 0 0, 65em 0 0 0 ou autre chose Smiley cligne ) ?
<ul id="menu_header">
  <li><a href="index.php">Accueil</a></li>  
  <li><a href="radios.php">Radios Online</a></li> 
  <li><a href="sections.php">Sections</a></li> 
  <li><a href="forum.php">Forums</a></li>
  <li><a href="download.php">Téléchargements</a></li>
</ul>

#menu_header {
  margin: 0;
  padding: 65px 0 0 0;
  list-style: none;
}
#menu_header li {
  margin: 0;
  padding: 0;
  float: left;
  width: 120px;
  /* Quand un élément est en positionnement flottant, il vaut mieux lui fixer une taille */
}
#menu_header a {
  display: block;
  width: 120px; 
  height: 35px; 
  line-height: 35px; 
  color: black; 
  font-weight: bold; 
  text-align: center;  
  text-decoration: none;
  background: url('../images/nav_butt.png') no-repeat;
  /* Pour l'élément a, tu n'as pas à déclarer la propriété float */ 
}
#menu_header a:hover { 
  background-position: 0 -35px;
  font-weight: bold; 
}

Modifié par Victor BRITO (10 Oct 2009 - 10:32)
Hello,

Un grand merci pour toutes ces précisions bien expliquées.

"Victor BRITO" a écrit :
(quand je lis 65 0 0 0, cela veut-il dire 65px 0 0 0, 65em 0 0 0 ou autre chose cligne ) ?
C'était bien 65px (merci pour la précision) Smiley cligne
Par contre doit on écrire : margin : 2px 3px 2px 3px;
ou margin : 2 3 2 3px; Cela suffit?

En effet en position float:right (c'est d'ailleurs ce que je ne comprend pas non plus) je suis obligé d'écrire mon menu en sens inverse pour que j'ai mon lien Accueil en début.

Par contre si je prend ton code, mon menu va se retrouver sur la gauche, alors que je le veux à droite.

Je pourrais y aller aussi avec un padding-left ensuite pour décaler mon menu sur la droite, mais ça ne risque pas de le décaler si l'on agrandit la taille de la police par exemple ?

Salutations
skippy a écrit :
Par contre doit on écrire : margin : 2px 3px 2px 3px;
ou margin : 2 3 2 3px; Cela suffit?

Il faut écrire
margin: 2px 3px 2px 3px;

Notation qui, dans cet exemple précis, peut même être raccourcie comme suit (vu que les marges supérieure et inférieure sont identiques, de même que les marges latérales) :
margin: 2px 3px;

skippy a écrit :
En effet en position float:right (c'est d'ailleurs ce que je ne comprend pas non plus) je suis obligé d'écrire mon menu en sens inverse pour que j'ai mon lien Accueil en début.

Par contre si je prend ton code, mon menu va se retrouver sur la gauche, alors que je le veux à droite.

Je pourrais y aller aussi avec un padding-left ensuite pour décaler mon menu sur la droite, mais ça ne risque pas de le décaler si l'on agrandit la taille de la police par exemple ?

Un petit passage par le guide de survie du positionnement en CSS ne fera pas de mal. Smiley cligne
Sujet clos
Aller à