[RESOLU] Centrer menu CSS

Mammouth du PHP | 687 Messages

02 mars 2014, 14:49

Bonjour à tous,

savez vous, comment je peux centrer mon menu horizontal ?
Merci beaucoup.

Voici ce que j'ai fait mais le menu ne se centre pas à l'intérieur du background.
/* ********************** menu general horizontal deroulant verticalement *********************** */
.nav {
position:relative;
font-family: 'Open Sans',sans-serif;font-weight:100;
left: 50%;
top: -39px;
margin-left: -450px; padding: 0;
width: 900px; line-height: 50px;
height:50px;
background: #132b61;
text-align:center;
z-index: 100;
}
.nav .table {
display:table; 
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}
.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}
.nav .select a {
display:block; 
height:50px; 
float:left; 
background-color: transparent;
padding: 0 30px 0 30px; 
text-decoration:none;  
white-space:nowrap; 
color:#ffffff;
font-size: 14px;
font-weight: 100;
}
.nav .select a:hover {
display:block; 
float:left; 
padding: 0 30px 0 30px; 
background: #7a7a7a;
color:#fff;
text-decoration: none;
}
.nav .select_sub {
display:none;
}
.nav .sub {
display: block;
float: left;
margin-left: 0;
padding-left: 0;
width: 190px;
list-style: none;
background-color: #7f7875;
opacity:0.90;
filter:alpha(opacity=90);
filter: “alpha(opacity=90)”;
}
.nav .select:hover .select_sub, .nav .current .show {
display: block;
position: absolute;
float:left;
margin-left: 0;
padding-left: 0;
width: 190px;
top: 50px;
background-color: transparent;
}
.nav .select:hover .sub li a, .nav .current .show .sub li a {
display: block;
height: auto;
float: left;
background-color: transparent;
padding-left: 30px;
margin-left: 0;
width: auto;
color:#fff;
font-weight: 100;
white-space:nowrap;
}
.nav .select:hover .sub li a:hover, .nav .current .sub li a:hover {
visibility:visible;
color:#fff;
background-color: #ccc;
font-weight: 100;
text-decoration: none;
width: 130px;
margin-left: 0;
opacity:0.85;
filter:alpha(opacity=85);
filter: “alpha(opacity=85)”;
}
/* ********************** menu general horizontal deroulant verticalement *********************** */
merci pour votre aide

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

02 mars 2014, 15:14

salut,

as tu essayé une taille fixe et margin auto ?

la position relative c'est pas forcément une solution (quand la taille de l'écran change tu ne sais pas forcément ce que cela va donner ;) )

commence par placer le bloc parent (nav) le reste suivra ;)

@+
Il en faut peu pour être heureux ......

Mammouth du PHP | 687 Messages

02 mars 2014, 17:56

Merci ;-)

J'ai mis un margin auto et effectivement le background est bien centré...
par contre le menu lui reste sur la gauche...
.nav {
position:relative;
display: block;
font-family: 'Open Sans',sans-serif;font-weight:100;
top: -39px;
padding: 0;
width: 900px; line-height: 50px;
height:50px;
margin: auto;
background: #132b61;
text-align:center;
z-index: 100;
}

Eléphant du PHP | 372 Messages

02 mars 2014, 19:13

Salut. Ici c du php mais bon. Je v po jouer o modo. Pr ton nav.
widht: 900px
Margin-left:auto
Margin-right:auto
Je sais ca ressembl a ce que tu as mis mais le fai de preciser d'abord right et apres left. Ca marche

Mammouth du PHP | 687 Messages

02 mars 2014, 22:05

Oui je sais, désolé :-(
tout est ok désormais.

Merci pour ton/votre aide;

Bonne soirée