28172 sujets

CSS et mise en forme, CSS3

Retour à la ligne d' un menu horizontal sous IE RESOLU

Bonjour, je refais le menu de mon site.
Je suis confronté à un problème.
J' arrive à faire en sorte que mon menu occupe toute la largeur sous FF en faisant varier les margin-left et right des <li>.
Seulement le problème est que sous IE le dernier bouton à droite de mon menu passe dessous, comme si il n' y avait pas assez de place. On dirait que sous IE le text-align center bugg, le menu est un peu sur la gauche par rapport à FF.
Comment-faire pour que ce menu occupe les 980 pixels de ma page aussi bien sous IE que sous FF ?
Voici la page:Cliquez
Et le code html du menu:
		<div id="global">
			<div id="pub-header-large">
				<script type="text/javascript"><!--
				google_ad_client = "pub-8596297593242972";
				/* 180x60, créé le 16/03/08 */
				google_ad_slot = "5990928970";
				google_ad_width = 180;
				google_ad_height = 60;
				google_cpa_choice = ""; // on file
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
			</div>					
			<div id="banniere"></div>
			<ul id="menu">
				<li id="bouton-gauche"><a href="" title="Aller à l' accueil">Accueil</a></li>
				<li class="bouton-milieu"><a href="traitement-video.html" title="Rubrique Vidéo">Vidéo</a></li>
				<li class="bouton-milieu"><a href="traitement-audio.html" title="Rubrique Audio">Audio</a></li>
				<li class="bouton-windows"><a href="tutoriels-astuces-windows-xp-vista.html" title="Rubrique Windows">Windows</a></li>
				<li class="bouton-milieu"><a href="astuces.html" title="Astuces Diverses">Astuces Diverses</a></li>
				<li class="bouton-milieu"><a href="comment-ca-marche.html" title="Comment ça Marche">Comment ça Marche</a></li>
				<li class="bouton-milieu"><a href="lexique.html" title="Le lexique">Lexique</a></li>
				<li id="bouton-droit"><a href="phpBB2.php" title="Le Forum">Forum</a></li>
			</ul>
			<div id="pub-sousmenu">
				<script type="text/javascript"><!--
					google_ad_client = "pub-8596297593242972";
					google_ad_width = 728;
					google_ad_height = 90;
					google_ad_format = "728x90_as";
					google_ad_type = "text";
					google_ad_channel = "";
					google_color_border = "000000";
					google_color_bg = "000000";
					google_color_link = "FFFFCC";
					google_color_text = "000000";
					google_color_url = "FFFFCC";
					//-->
				</script>
				<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
			</div>
		</div>
	</body>

Le code CSS:

body
{
background-color:black;
color:white;
}
#global
{
width:980px;
margin:0 auto;
}
a
{
color:white;
}
a:hover
{
color:#FD5656;
text-decoration:none;
}
#banniere
{
width:501px;
height:70px;
background-image:url("photos/test2.png");
background-repeat:no-repeat;
}
/*MENU*/
#menu
{
padding:0;
text-align:center;
}
#menu li
{
display:inline;
list-style:none;
}
.bouton-milieu a
{
background-image:url(photos/menu/fond-menu.png);
background-repeat:repeat x;
text-decoration:none;
padding:10px 26px; 
}
.bouton-windows a
{
background-image:url(photos/menu/bouton-windows.png);
background-position:left;
text-decoration:none;
padding-left:55px;
padding-right:26px;
padding-top:10px;
padding-bottom:10px;
}
.bouton-windows a:hover
{
text-decoration:underline;
color:#FF9999;
background-image:url(photos/menu/bouton-windows-survole.png);
background-repeat:repeat x;
}
.bouton-milieu a:hover
{
text-decoration:underline;
color:#FF9999;
background-image:url(photos/menu/survole.png);
background-repeat:repeat x;
}
#bouton-gauche a
{
text-decoration:none;
padding:10px 26px; 
background-image:url(photos/menu/bouton-gauche.png);
background-position:left;
background-repeat:no-repeat;
}
#bouton-gauche a:hover
{
color:#FF9999;
text-decoration:underline;
background-image:url(photos/menu/bouton-gauche-survole.png);
background-position:left;
background-repeat:no-repeat;
}
#bouton-droit a
{
text-decoration:none;
padding:10px 26px; 
background-image:url(photos/menu/bouton-droit.png);
background-repeat:no-repeat;
background-position:right;
}
#bouton-droit a:hover
{
color:#FF9999;
text-decoration:underline;
background-image:url(photos/menu/bouton-droit-survole.png);
background-position:right;
background-repeat:no-repeat;
}
#pub-sousmenu
{
padding-top:10px;
margin:0 auto;
width:728px;
height:90px;
}
#pub-header-large
{
float:right;
margin-top:5px;
}


Merci d' avance Smiley cligne
Modifié par krsytof (18 Mar 2008 - 12:22)
Modérateur
bonsoir,

ton menu peut avoir une largeur différente selon la police d'affichage , sa taille , etc ...
(le lien avec son padding et l'espace occupé par le texte)
La police , sa taille ou l'espacement entre les caractéres peut-etre differents et provoqué un retour a la ligne du dernier element de liste ,effet que tu perçoit dans IE , mais qui peut apparaitre aussi dans les autres navigateurs.

Tu peut forcer un affichage sur une seule ligne en appliquant a #menu:
white-space:nowrap;


GC
bonjour effectivement, le menu passe sur une seule ligne mais le résultat est assez moche, et nécessite que je bidouille.
J' ai constaté une chose, c' est qu' en fait le menu n' est pas centré sous IE.
On le vois bien sur cette page où j' ai mis le fond d' une autre couleur:
Test
le problème vient de là je pense, à quoi est dû ce décalage et surtout comment le supprimer ? j' ai pourtant la commande text-aling:center sur le menu, hors ce dernier n' est pas centré sous IE
Autre chose en rapport, lorsque j' enlève la commande test-align:center, le menu se bloc à gauche sous FF, ce qui est normal, mais ne bouge pas du tout sous IE, il reste décalé Smiley decu

EDIT:
j' ai résolu le problème, il falllait ajouter un margin:0 pour le menu : Résultat
Merci Smiley cligne
Modifié par krsytof (18 Mar 2008 - 12:21)
Sujet clos
Aller à