28172 sujets

CSS et mise en forme, CSS3

[resolu] Centrer un menu horizontal sous forme de liste

Bonjour,

Je fais face à des difficultés pour centrer une navigation horizontale créée à partir de listes.
J'ai essayé plusieurs solution avec text-align center, margin 0 auto etc. en vain.
Peut-être pourriez-vous m'aider svp ?

Voici le code html et css :


            <ul id="nav">
                <li class="top-list"><a href="#">TITRE</a>
			<ul>
                            <li class="bottom-list"><a href="#">TITRE</a></li>
                        </ul>
                </li>
            </ul>




#nav, #nav ul { /* toutes les listes */
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1;
}

ul#nav{
  background-image:url("../img/nav_menu.gif");
	background-repeat: no-repeat;
	padding:0;
	margin:0;
	width:960px;
	height:40px;
}
ul#nav li{
	font-size:1.2em;
	color:#550126;
	text-transform:uppercase;
}

#nav a {
  color:#444342;
  width: auto;
  padding-right:20px;
}

#nav li { /* tous les items de liste */
  float: left;
  width: auto; /* largeur obligatoire, sinon opera devient fou */
}

#nav li ul { /* listes de deuxième niveau */
  position: absolute;
  width: auto;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
}


Merci !
Modifié par nforum (28 Apr 2010 - 11:26)
Bonjour,

Avec margin:0 auto pour ul#nav le menu devrait être centré. Après, ça dépends peut-être du reste de la page.
Modifié par Laurie-Anne (26 Apr 2010 - 17:26)
Il faudrait que ton block #nav ait une largeur prédéfini ensuite il faudrait que ce même block soit placé en margin: 0 auto, plutôt que seulement 0. De cette façon ton block devrait se centré.

EDIT: GRILLÉ! Smiley biggol
Modifié par juliesunset (26 Apr 2010 - 17:28)
Merci à toutes les 2 pour vos rapides réponses.

J'ai essayé les 2 solutions, mais étrangement aucune des 2 ne fonctionnent. Ma liste se situe dans une div en float: left et position relative du type :


<div class="grid-16">
  <ul>
    ....
  </ul>
</div>


est ce cela qui pose problème ?

Merci
A défaut de pouvoir mettre en ligne le site, je vais ajouter les css complémentaires :


<div class="grid-16">

           <ul id="nav">
                <li class="top-list"><a href="#">TITRE</a>
			<ul>
                            <li class="bottom-list"><a href="#">TITRE</a></li>
                        </ul>
                </li>
            </ul>

</div>




.grid-16 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 940px;
}

#nav, #nav ul { /* toutes les listes */
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1;
}

ul#nav{
        background-image:url("../img/nav_menu.gif");
	background-repeat: no-repeat;
	padding:0;
	margin:0;
	width:960px;
	height:40px;
}

ul#nav li{
	font-size:1.2em;
	color:#550126;
	text-transform:uppercase;
}

#nav a {
  color:#444342;
  width: auto;
  padding-right:20px;
}

#nav li { /* tous les items de liste */
  float: left;
  width: auto; /* largeur obligatoire, sinon opera devient fou */
}

#nav li ul { /* listes de deuxième niveau */
  position: absolute;
  width: auto;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
}
Bonjour,

Tu veux centrer un élément qui est plus large que son conteneur, voilà pourquoi le margin:0 auto ne fonctionne pas.

Les 2 solutions les plus simples pour effectuer ton centrage :
- Mettre un margin-left:-10px sur #nav,
- Mettre un position:relative et un left:-10px sur #nav

La solution du positionnement absolu + marges négatives (voir tout en bas de la page) ne me semble pas adaptée dans ton cas (il faudrait être sûr de la hauteur de .grid-16).
Merci BeliG pour l'info. Comme j'utilise le 960 grid, j'ai ajouté à ma div "grid-16" les classes "alpha omega" qui annule les margin-left et margin-right.

J'ai réussi à centrer mes listes du menu principal et du sous menu en faisant cela :

#nav{
	width:940px;
	padding:0;
	margin:0;
	height:40px;
	background:#f1f1f1;
	text-align:center;
}
#nav ul { /* toutes les listes */
  list-style: none;
}

ul#nav li{
	text-transform:uppercase;
	display:inline;
	padding-right:20px;
}

#nav li { /* tous les items de liste */
  width: auto; /* largeur obligatoire, sinon opera devient fou */
}

#nav li ul { /* listes de deuxième niveau */
  position: absolute;
  background: orange;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
  width:940px;
  text-align:center;
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
}


En gros, j'ai ajouté une largeur fixe (width:940px) à #nav et #nav li ul, ainsi qu'un text-align:center...

En bref, là ça marche. J'espère que tout est propre !

Merci pour les coup de main
Sujet clos
Aller à