28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage menu sous IE (tutoriels alsa)

Bonsoir à tous,

Je rencontre un problème en essayant d'utiliser un menu basé sur le tutoriel http://css.alsacreations.com/modelesmenus/hs1.htm.

Ma page se structure à peu près comme ceci :

<div id="content">
     <div>contenu en tête</div>
     <div id="menu">
		<ul class="menu">
			<li><a href="#">Lien 1</a></li>
			<li><a href="#">Lien 2</a></li>
			<li><a href="#">Lien 3</a></li>
		</ul>
     </div>
     [...]
</div>


La div menu est présente à des fins purement graphiques. Le css est :

#content {
	width:750px;
	margin:0 auto;
}
#menu {
	height: 30px;
	padding-top:10px;
	text-align:center;
	background-color:#84C2FF;
}
.menu {
	list-style-type: none;
	margin:0;
	width: 100%; /* précision pour Opera */
}
.menu li {
	float: left;
}
.menu a {
	margin: 0 1px;
	padding:3px 2px;
	display: block;
	border: 1px solid white;
	text-decoration: none;
	color: #fff;
	background:#84C2FF;
}


Sous FF, tout est nickel, le menu est centré. Par contre, sous IE, il reste désespérément aligné à gauche Smiley decu

Existe-t-il une solution que je n'aurai pas vue ou faut-il que j'utilise une structure de menu différente ?

D'avance merci pour toute suggestion,
Johan.
Modifié par trasher (24 Feb 2006 - 17:50)
Salut,
Déjà tu peux simplifier ton code HTML comme suit:
<div id="content">
     <div>contenu en tête</div>
     <ul class="menu">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
    </ul>
     [...]
</div>

Le div est inutil...
ensuite:
#content {
  position: absolute;
	width: 750px;
  left: 50%;
  margin-left: -375px;
}

.menu {
	height: 30px;
	padding: 0px;
	text-align:center;
	background-color:#84C2FF;
	list-style-type: none;
	margin:0;
	width: 100%; /* précision pour Opera */
}

.menu li {
	float: left;
}

.menu a {
	margin: 0 1px;
	padding: 3px 2px;
	display: block;
	border: 1px solid white;
	text-decoration: none;
	color: #fff;
	background:#84C2FF;
}


Somme toute je n'ai changé que l'id content en utilisant ce qui est expliqué dans un des tuto de Alsa. Smiley cligne
Merci pour ta réponse, effectivement il semble que je puisse supprimer la div.

Toutefois, avec cette nouvelle procédure, le width:100% pose problème sous firefox (le ul déborde à droite de la div content). Il faudra que je teste sous opera, c'est un browser que je n'utilise pas.

De plus, le souci de centrage sous IE est toujours présent.

D'un autre côté, je pense préférable d'utiliser la technique des marges auto plutôt que des marges négatives, car dans le cas ou la taille du navigateur serait insufisante, les marges négatives cachent une partie de la page.
Ai-je tort?

Merci beaucoup.
Johan.
Tien chez moi cela fonctionne sous IE?? Tu utilise quel version? ton pbleme de débordement est dû au padding qu'il faut metre à 0...
++

PS: A mon avis que ce soit en marge auto ou en marge negative, si la taille du navigateur est insuffisante le résultat sera la meme... tu aura simplement un scrool bar horizontale qui apparetra en bas de ta page.
Modifié par NuDD (24 Feb 2006 - 13:45)
Je viens de faire quelques essais. Effectivement, le décalage était du au padding.
Par contre maintenant, j'ai mon menu aligné à gauche sous ff et ie :
upload/4515-shootmenu.jpg

Voici le code complet de la page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Page de tests</title>
		<link type="text/css" rel="stylesheet" href="templates/test.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />

	</head>
	<body>
		<div id="content">
			<ul class="menu">
				<li><a href="offres.php">Nos offres</a></li>
				<li><a href="#">Nos engagements</a></li>
				<li><a href="#">Ils parlent de nous</a></li>
				<li><a href="#">Nos tarifs</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Notre revue de presse</a></li>
				<li><a href="#">Nous contacter</a></li>
			</ul>
		</div>
	</body>
</html>


et du fichier css :

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}
#content {
	position: absolute;
	width: 750px;
	left: 50%;
	margin-left: -375px;
}
.menu {
	height: 30px;
	padding: 0px;
	padding-top:5px;
	text-align:center;
	background-color:#84C2FF;
	list-style-type: none;
	margin:0;
	width: 100%; /* précision pour Opera */
}
.menu li {
	float: left;
}
.menu a {
	margin: 0 1px;
	padding:3px 2px;
	display: block;
	border: 1px solid white;
	text-decoration: none;
	color: #fff;
	background:#84C2FF;
}


Si tu parviens NuDD à obtenir le menu centré dans le #content, c'est qu'il y a une erreur dans le code ce dessus.

Merci beaucoup,
Johan.

<edit>J'utilise Firefox 1.5.0.1 sous linux et IE6 sp1 sous windoz Smiley smile </edit>
Modifié par trasher (24 Feb 2006 - 16:05)
Pour revenir brièvement sur l'histoire des marges négatives...

En utilisant cette technique, si la fenêtre est trop petite, il y aura effectivement une scrollbar horizontale, mais qui ne permettra pas de voir la partie "cachée" à gauche... (simple test en jouant avec la dimension du navigateur sur une page utilisant cette technique)
C'est pourquoi je préfère actuellement utiliser les marges automatiques, ce ma semble plus sûr. Néanmoins, cette technique doit aussi apporter son lots d'inconvénients, mais j'avoue n'en avoir pas encore rencontré Smiley cligne

Je ne suis pas sûr non plus que la façon dont je centre ma div #content sur la page interfère avec son contenu (mais je peux me tromper, si c'est le cas, corrigez moi).
Bonjour,
a écrit :
C'est pourquoi je préfère actuellement utiliser les marges automatiques, ce ma semble plus sûr. Néanmoins, cette technique doit aussi apporter son lots d'inconvénients,


A ma connaissance cela ne pause aucun problème.
Comme tu l'explique les marges négatives peuvent cacher les parties haute ou gauche de ta page dans des petites résolutions mais dans ton cas étant donné que ta largeur est bien infèrieure à la zone d'affichage minimum (800px)
ça n'est pas problématique, ce qui n'est pas le cas des marge négatives verticale puisque la hauteur d'une page dépsse souvent les 430px (zone d'affichage du 800x600)

Tu as dû lire les tutoriels un peu vite.
Pour centrer un élément de type block dans son conteneur,
celui-ci doit avoir des mages latérales à auto comme tu l'as fais mais il ne faut pas oublier les anciennes versions d'IE et déclarer dans le conteneur:
text-align:center

Voila le code que je mettrais


body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
        text-align:center;
}
#content {
	position: relative; /*pas obligatoire mais sert de position de référence*/
	width: 750px;
        margin: 0 auto;
}

.menu {
	height: 30px;
	padding: 0px;
	padding-top:5px;
	text-align:center;   /*en principe inutile puisque c'est une propriété héritée*/
	background-color:#84C2FF;
	list-style-type: none;
	margin: 0 auto;     /*tu avais oublié le auto*/
	width: 100%; /* précision pour Opera */
}
.menu li {float: left; text-align:left /*pour récupérer l'alignement par default
}

Modifié par Hermann (24 Feb 2006 - 16:46)
a écrit :
ça n'est pas problématique, ce qui n'est pas le cas des marge négatives verticale puisque la hauteur d'une page dépsse souvent les 430px (zone d'affichage du 800x600)

Je suis parfaitement d'accord, j'avais rencontré ce problème de parties "cachées" en essayant de faire un site centré sur la hauteur ; depuis je préfère utiliser les marges automatiques.

a écrit :
celui-ci doit avoir des mages latérales à auto comme tu l'as fais mais il ne faut pas oublier les anciennes versions d'IE et déclarer dans le conteneur:
text-align:center


Il est vrai que j'ai tendance à oublier un peu les anciennes versions de IE (honte à moi !) ... Merci beaucoup de me rapeller ce détail Smiley cligne

a écrit :
margin: 0 auto; /*tu avais oublié le auto*/

Là je ne suis pas vraiment d'accord... Ne faut-il pas déclarer un width fixe pour utiliser les marges automatiques ?
Dans le .menu, on spécifie un width à 100%, donc je pense que spécifier des marges automatiques ne changera rien au problème (sauf erreur de ma part, bien entendu).

Néanmoins, cela ne résoud toujours pas ce centrage. J'ai toutefois trouvé une solution alternative, qui semble fonctionner :

#content {
	position: relative; /*pas obligatoire mais sert de position de rfrence*/
	width: 750px;
        margin: 0 auto;
}

.menu {
	height: 30px;
	padding: 5px 0 0 0;
	background-color:#84C2FF;
	list-style-type: none;
	margin: 0;
	width: 100%; /* prcision pour Opera */
}

.menu li {
	display:inline;
}

.menu a {
	margin: 0 1px;
	padding:3px 2px;
	border: 1px solid white;
	text-decoration: none;
	color: #fff;
	background:#84C2FF;
}


En bref, je supprime le display:block pour le .menu a et change le float:left en diplay:inline pour le .menu
Je pense que l'utilisation des float ne va pas de paire avec le centrage de l'élément... Tant que j'utilise le float, je m'apercois (en ajoutant une bordure tout autour de .menu) que le ul prend systématiquement toute la largeur disponible.

Il semble que mon problème soit résolu, je vous remercie vivement de vos précieux conseils Smiley smile
Il faut savoir que les marge auto n'ont aucun effet sur le centrage vertical,
la seule solution à ma connaissance pour centrer un block à l'intèrieur d'un block est d'utiliser des padding verticaux égaux.
Sujet clos
Aller à