28221 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer menu horizontal

Bonjour à tous

Oui, je sais, le titre de mon sujet n'est pas très original puisque j'ai vu que plusieurs personnes se posent le même type de questions.

Mais je viens de faire des recherches pendant plus d'une heure sur le forum afin de trouver réponse à mon problème.
Je n'ai pas trouvé. Smiley decu

En m'appuyant sur les tutoriels de Raphaël, j'ai réalisé un menu horizontal tout simple.
Le problème est que je ne parviens pas à le centrer horizontalement.

J'essaye depuis des heures des tas de choses, notamment la propriété: text-align: center; que j'ai essayé partout, à tous les niveaux de mon code, sans succès.
La solution est peut-être très simple mais j'ai le cerveau qui chauffe et je ne vois plus rien.

Pour vous aider à comprendre, voici un exemple de mon code.

Partie CSS :


 #fondmenu { 	margin-left: auto;
     			margin-right: auto;
			background-color: yellow;
			width: 541px;
			height: 51px;
			
			}

	ul	{	margin: 0;
			padding: 0;
			list-style-type: none;
			width: 100%;
			
			}

	li	{	float: left;
			
			}

	.menu a	{	display: block;
			float: left;
			text-decoration: none;
			font: 1em/51px Verdana, sans-serif;
			color: black;
			
			}

	.menu a:hover {	color: red;

			}



Partie html :


 <div id="fondmenu">
	<ul class="menu"><li><a href="">Lien 1 | </a></li>
			<li><a href="">Lien 2 | </a></li>
			<li><a href="">Lien 3 | </a></li>
			<li><a href="">Lien 4 | </a></li>
			<li><a href="">Lien 5</a></li>
	</ul>
</div>



(Une autre question que je me pose : il n'est peut-être pas nécessaire de garder la balise <div>, car dans la mesure ou <ul> est une balise block je peux lui attribuer le style du <div> ?)


Si quelqu'un peut m'éclairer, un grand merci d'avance. Smiley cligne
2 solutions :
* la première, utiliser 
display: inline;
sur les <li> et 
text-align: center;
sur le <ul>

* la deuxième, 
utiliser float: left ;
sur les <li>, et sur le <ul> avec 
margin: 0 auto; 
width: VALEUR;
sur le <ul> ET 
text-align: center;
sur le conteneur de ton <ul>.
Cette méthode t'oblige donc à connaitre la largeur de ton menu et à avoir un conteneur supplémentaire. La 1ere solution est donc plus adaptée.
Modifié le 06 Jan 2005 - 19:48
Olivier, j'ai essayé tes 2 solutions, sans succès.
La 1ere ne change rien et la 2e, quie ne centre toujours rien, décale tout sur le bord gauche du navigateur.

Merci quand même d'avoir essayé de m'aider.

Si quelqu'un à une autre idée, elle est la bienvenue car je ne sais pas comment je vais faire. Smiley decu
Tu as dû mal t'y prendre ou faire une fausse manip à mon avis, parceque l'une et l'autre des techniques fonctionnent si elles sont implémentées comme il faut, si tu pouvais nous montrer un exemple en ligne ou des bouts de code en rapport avec tes essais. Je te ferais un petit exemple tout à l'heure.
À mon avis, pour que <ul> soit centré, on doit applique text-align: center; sur son parent...

Le HTML :

<body>
 <ul id="menu">
  <li><a href="">Lien 1</a> | </li>
  <li><a href="">Lien 2</a> | </li>
  <li><a href="">Lien 3</a> | </li>
  <li><a href="">Lien 4</a> | </li>
  <li><a href="">Lien 5</a></li>
 </ul>
</body>

Le CSS :

* {padding: 0; margin: 0;}
body { 
   text-align: center; 
} 
ul { 
   background-color: yellow; 
   width: 541px; 
   height: 51px; 
   margin-left: auto; 
   margin-right: auto; 
}
li { 
   display: inline; 
   list-style-type: none; 
}
#menu a { 
   color: black; 
   font: 1em/51px Verdana, sans-serif; 
   text-decoration: none; 
}
#menu a:hover { 
   color: red; 
}
Je confirme cela fonctionne, je viens de tester la méthode:
ul#menu li{
	display:inline;
	text-decoration: none;
}

J'ai testé sans la div que tu utilises, juste avec ul dimensionné. Par contre sans le contexte de ta page, difficile de savoir où tu t'emmêle. Smiley cligne

Le principe:
-conteneur en text-align:center (précaution pour IE<6),
-ul dimensionné et text-align:center,
-li en diplay:inline.

Le code:

body{
	text-align:center;
}
ul#menu{
	margin:0 auto;
	width: valeur;
	text-align:center;
}
ul#menu li{
	display:inline;
	text-decoration: none;
}

et

<ul id="menu">
	<li><a href="">Lien 1 | </a></li>
	<li><a href="">Lien 2 | </a></li>
	<li><a href="">Lien 3 | </a></li>
	<li><a href="">Lien 4 | </a></li>
	<li><a href="">Lien 5</a></li>
</ul>


édit: grillé Smiley cligne
Modifié le 08 Jan 2005 - 13:16
Un grand merci pour votre aide.

J'ai réussi en utilisant le code d'Igor.
Ca fonctionne ! Smiley ravi
Modifié le 17 Jan 2005 - 11:30
Sujet clos
Aller à