Menu de navigation reste à droite au lieu du milieu

Bonsoir,

J'essaye de centrer mon menu de navigation au milieu mais il reste collé à droite :

J'ai utilisé ce code CSS pour y parvenir comme lu sur ce site :

nav {
	background: url(/assets/img/grad1-mask.png) repeat-x top #333;
	width:750px;
   	margin-left: auto;
   	margin-right: auto;
	text-align:center;
}

Malheureusement, il reste collé à droite...

Je n'arrive pas à voir mon erreur... (exemple ici : http://www.subran.be )

Merci d'avance pour votre aide,

Suby

Déjà tu peux utiliser les raccourcis

margin-left: auto; margin-right:auto;

C'est pareil en mettant :

 margin: 0 auto 0 auto;

(haut droite bas gauche).


Dans ton code ton header et ton nav sont dans ton main qui est en position relative, pourquoi?
Modifié par jmlapam (25 Sep 2011 - 21:37)

Ok, je viens de retirer la position relative de main et j'ai déplacé le <div id="main"> après la balise <nav>

J'ai aussi adapter le style de la balise nav en

nav {
	background: url(/assets/img/grad1-mask.png) repeat-x top #333;
	width:750px;
	margin: 0 auto 0 auto;
	text-align:center;
}

Mais mon menu reste collé à gauche

Merci pour ton aide,

Suby

Ah ok je viens de comprendre que c'est du texte dont tu parles ! pas du bloc nav.

centre le ul,

.sf-menu {
position: relative;
bottom: 17px;
margin:0 auto;
padding:15px;

}

Modifié par jmlapam (26 Sep 2011 - 01:12)

Merci, je viens de tester mais le contenu du menu de navigation reste collé à gauche et le bloc <nav> remonte pour se coller contre le bloc <header>

Ouais normal, j'ai mis un code pour un margin-top 0.


En tout cas, il faut centre le UL du menu.
Modifié par jmlapam (26 Sep 2011 - 17:28)

En rappoort avec les <ul> du menu j'ai ceci :

.sf-menu, .sf-menu * {
padding: 0;
list-style:		none;
}
.sf-menu {
position: relative;
bottom: 17px;
margin-left: auto;
margin-right: auto;
padding:18px;
text-align:center;
}

.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			12em; /* left offset of submenus need to match (see below) */
	text-align:center;
}
.sf-menu ul li {
	width:			100%;
}

Mais le menu de navigation reste à gauche (l'intérieur du menu déroulant lui est au milieu

Rajoute un padding-left dans ton menu:

.sf-menu {
position: relative;
bottom: 17px;
padding:18px 18px 18px 80px;



}

Attention, j'ai mis 80px en padding-left, juste pour l'exemple du code, mais il faut que tu vois avec la largeur du menu pour la mesure exacte afin d'avoir un centrage précis.





EDIT: faut jouer sur le padding parce que tu as mis des position partout.
Modifié par jmlapam (26 Sep 2011 - 17:59)

Ca fonctionne nickel ! Merci beaucoup !