28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voici mon code :


body {
	background-color:#fff;
	margin:0;
	padding:0;

}
.menu { 
  list-style:none; 
  border-bottom:#2c7dcf solid 5px;
  background-color:#ffffff; 
  width:100%; height:27px; 
  line-height:27px;
  margin:10px 0 0 0; 
  
  
  }
.menu li { 
  float:left; 
  margin-left:10px;
}

.menu li a {
  display:block; 
  float:left; 
  height:27px; 
  line-height:27px; 
  color:#3e3e3e; 
  text-decoration:none; 
  font-family:arial, verdana, sans-serif; 
  text-align:center; 
  font-size:11px;
  padding:0 0 0 7px; 
  cursor:pointer; 
}
.menu li a b {
  float:left; 
  display:block; 
  padding:0 14px 0 7px;
}

.menu li.current a {
  color:#fff; 
  background:url(tuto_304_onglet2.jpg);
}
.menu li.current a b {
  background:url(tuto_304_onglet2.jpg) no-repeat right top;
}

.menu li a:hover {
  color:#fff; 
  background: url(tuto_304_onglet2.jpg);
}

.menu li a:hover b {
  background:url(tuto_304_onglet2.jpg) 
  no-repeat right top;
}



<ul class="menu">
<li class="current"><a href="#"><b>Accueil</b></a></li>
<li><a href="#"><b>Produits</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Références</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
<li><a href="#"><b>Partenaires</b></a></li>
</ul>


Cela représente un menu horizontal avec un système d'onglet. Actuellement ce menu est aligné sur la gauche de la page, j'aimerais le centrer mais je n'y arrive pas.

Voila pourquoi je demande de l'aide Smiley cligne

Merci à tous.
Bonjour,

Si ton menu a un width: 100%, je ne vois pas comment tu peux le centrer et que ça se voie.

Sinon, pour un menu qui a une largeur définie : margin: 10px auto 0.
Modifié par thierry (05 Oct 2012 - 09:00)