28172 sujets

CSS et mise en forme, CSS3

Centrer menu horizontalement

Soir'

Je deviens fou avec mon menu.
Je cherche seulement à le centrer horizontalement... Un coup de main ?
PS : et oui... le plus grave est que j'ai bien lu le tuto et les différents sujets se rapportant au prb... Smiley decu Merci de votre aide.

CSS :

<ul id="menuDeroulant">
		
		
		<li>
			<a href="#">Partie 3</a>
			<ul class="sousMenu">			      
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>				
				<li><a href="#">raisins</a></li>
				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul>
		</li>
		
	</ul>


HTML :

body {
 font: 11px verdana, sans-serif;
 background: #AFA99B top left no-repeat;
 margin: 0;
 padding: 0;
}

#menuDeroulant
{
	background: #6A6458;
	width: 150px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 150px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

Modifié par Mandes (07 Nov 2010 - 19:05)
salut salut

euh si c'est ton menuderoulant que tu souhaites centrer horizontalement ca sera


#menuDeroulant { 
    margin: 0 auto;
}


Si j'ai bien compris la question du moin ^^

car la tu as mis :

	
#menuDeroulant {
position: absolute;
top: 0;
left: 0;
}


donc forcément il se positionne du en haut a gauche par rapport au premier parent mis en relative, si il n'y en a pas c'est le body ^^

j'espère que ca ta aider^^
Modifié par Gili (07 Nov 2010 - 20:13)
Bonjour,

Pour centrer un menu horizontalement la largeur (width) de l' ul doit être égale à la largeur (width+padding+border+margin) des li et ensuite il faut mettre un margin:auto sur l' ul.
Sujet clos
Aller à