28172 sujets

CSS et mise en forme, CSS3

Centrer menu avec float

Bonjour,

J'ai un menu avec des <li> qui sont en float:left;, comment faire pour que le menu soit centrer horizontalement dans le div#navbar ?

merci


#header	{ position:relative;	background:url(../images/header.gif) no-repeat;	height:219px;	 color:#5a5a5a; }

#header #navbar {
   margin:189px auto 0em auto;
   position:absolute; 
   padding:0em; 
   width:980px; 
   height:30px; 
   text-align:center; }

#header #navbar ul {
   margin:0em; padding:0em; }

#header #navbar li {
   float: left ;   list-style:none;}

#header #navbar li a {
   display: block ;}

Modifié par Sylvain245 (12 Jan 2011 - 13:04)
Plusieurs technique.
Si la largeur du menu est fixe, tu lui applique une width et tu mets des marges gauches et droite en auto.
Mais si tu veux garder tes li en float pour pouvoir garder un contrôle total sur leur taille. (ce qui est le cas quand tu veux un dropdown menu sans-bug sous ie).
Tu as 2 solutions en pure CSS à ma connaissance.
1. tu ajoutes à ta liste

#header #navbar ul {
  display: table;
  margin: 0 auto;
}

Mais ca ne fonctionne pas sous ie7 et 6
Il faut que tu utilises une autre technique. pas très joli mais efficace.
Que tu peux retrouver ici http://www.pmob.co.uk/pob/centred-float.htm
Tu places ton ul #navbar dans une div ex: #navbar-container

#navbar-container {
  float: right ;
  position: relative;
  left: -50%;
}
#navbar-container #navbar {
  position: relative;
  left: 50%;
}

Cdt
Modifié par joska (12 Jan 2011 - 13:08)
Oui, merci, fonctionne bien avec la 2ieme méthode, même si ce n'est pas très chic Smiley cligne
Modifié par Sylvain245 (12 Jan 2011 - 13:25)
Je sais mais j'ai pas mieux à proposer. C'est ce que j'utilise pour mon site.
J'ai fais plein de test avec plein de navigateurs et je trouve la 2ème méthode la plus efficaces.

si quelqu'un à mieux qu'il partage svp.
Sylvain245 a écrit :
Bonjour,

J'ai un menu avec des &lt;li&gt; qui sont en float:left;, comment faire pour que le menu soit centrer horizontalement dans le div#navbar ?

merci


#header	{ position:relative;	background:url(../images/header.gif) no-repeat;	height:219px;	 color:#5a5a5a; }

#header #navbar {
   margin:189px auto 0em auto;
   position:absolute; 
   padding:0em; 
   width:980px; 
   height:30px; 
   text-align:center; }

#header #navbar ul {
   margin:0em; padding:0em; }

#header #navbar li {
   float: left ;   list-style:none;}

#header #navbar li a {
   display: block ;}

Bonjour,

En modifiant le contexte de formatage et en appliquant par exemple a ul : 
display:inline-block;
et en passant en commentaire conditionnel pour IE7 et moins:
display:inline;zoom:1;

GC
Wep, a première vu la méthode de GC, fonctionne sous :
- ie6+
- firefox 3+
- chrome 4+
-safari 3.2+
- opera 9+

fonctionne pas sous
- firefox 2 (mais qui l'utilise encore ?)
Modifié par Sylvain245 (12 Jan 2011 - 14:36)
sous ff2 , que je ne vois plus apparaitre dans mes stat de visites depuis pas mal de temps , il y a possibilité de faire usage d'un display:table et margin:auto; pour ul en lieu et place du display:inline-block;

GC
En effet ca fonctionne bien.
Il faut que je fasse quelque test mais ca me semble une bonne solution.
Modifié par joska (12 Jan 2011 - 16:53)
Sujet clos
Aller à