28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème Menu horizontal non centré

Bonjour,

J'essaie de faire un menu tout en CSS, et le seul problème que j'ai c'est qu'il n'est pas centré. C'est un horizontal mais il doit faire 2 lignes, et à cause du float:left il est à gauche. Seulement si je l'enlève ou que je met center, le menu n'est plus horizontal mais vertical. Je mets le code et le lien de la page, si quelqu'un peut m'éclairer....

ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin-left: 25px;
float: left;
}
ul li a {
border-style: solid;
border-color: #d85b2d #a53700 #a53700 #d85b2d;
border-width: 2px;
padding: 5px;
width: 110px;
height: 30px;
background-color: #500000;
color: #ffffcc;
text-decoration: none;
text-align: center;
}
ul li a:hover {
border-color: #000000;
color: #660000;
background-color: #ffffcc;

<ul>
  <br>
  <li><a href="http://www.corambe.com">Accueil</a></li>
  <li><a href="http://www.corambe.com/presentation.html">Qui
suis-je ?</a></li>
  <li><a href="http://www.corambe.com/association.html">L'association
Corambé</a></li>
  <li><a href="http://www.corambe.com/bach.html">Les
Fleurs de Bach</a></li>
  <li><a href="http://www.corambe.com/conseils.html">Conseils
en Fleurs de Bach</a></li>
  <br>
  <br>
  <br>
  <li><a href="http://www.corambe.com/animaux.html">Fleurs
de Bach pour animaux</a></li>
  <li><a href="http://www.corambe.com/education.html">Education
des chevaux</a></li>
  <li><a href="http://www.corambe.com/therapie.html">Thérapie
par le cheval</a></li>
  <li><a href="http://corambe.aceboard.fr">Forum</a></li>
</ul>

Modifié par corambe (04 Sep 2008 - 18:02)
Bonjour,

Tu ne pourrais pas centrer ces items de menu en float: left (ou right). Dans l'idéal, il faudrait plutôt utiliser display: inline-block pour tes éléments LI. Pour des raisons de compatibilité, on utilisera plutôt display: inline, qui devrait te permettre d'obtenir le rendu souhaité (mais ça peut être un peu délicat).
A quoi servent exactement ces commandes 'display' ? où dois je les rajouter?

Je les ai mis avec 'inline' mais rien n'a changé... Smiley confused
Le display: inline; se met sur tes éléments de listes li et indiquent que tu veux ta liste horizontale. Dans ton code, il te suffit d'enlever la mention float: left; de tes li et de la remplacer par un display: inline;

Accessoirement, tu peux enlever les <br /> de ton ul et mettre des marges à tes li afin qu'elles ne se touchent pas Smiley smile
Super, c'est exactement ce que je voulais, merci beaucoup !!
Par contre j'aurais une autre question, j'aimerais mettre un autre bout de menu horizontal, ailleurs sur la page et dans un autre style (ça c'est si c'est possible), comment faut-il faire?
J'ai essayé de mettre directement quelque chose de ce style : 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Mais cela n'a pas marché, j'ai juste le texte...
Everholt, j'aimerais mettre des marges au lieu des <br>, d'autant plus que ça passe sur mozilla mais c'est moche sur ie mais je n'arrive à rien.
Si je mets des marges gauche droite dans li ça fonctionne, mais pas en haut et bas... Je ne comprends pas pourquoi...
Sujet clos
Aller à