menu un peu à l'ouest

Bonsoir à tous , voici un menu dans un div , mais le menu n'est ni centré verticalement et horizontalement et le texte déborde des cases du menu , quelqu'un saurait me dire où est le soucis svp ?

Code:

---

1 2 3 4 5 6 7 8

<div class="s"> <ul> <li><a href="">x</a></li> <li><a href="">y</a></li> <li><a href="">z</a></li> <li><a href="">u</a></li> </ul> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.s { height: 20px; }   ul {list-style-type: none;}   div.s a { margin: 0 2px; width: 100px; height: 15px; float: left; text-align: center; border: 1px solid gray; }

---

merci

Salut

C'est marrant ça me rappelle une autre discussion : http://www.developpez.net/forums/sho...d.php?t=373837

celle ci n'a rien à voir , l'autre j'ai résolu le soucis , là il s'agit d'un menu horizontal .

pour alignement, c'est

.s li {
display: inline;
}

Bon avec le code que as donné on obtient ça :

http://strixlab.free.fr/capture2.jpg

Peut-être plus de code CSS et HTML ?

Edit : c'est li tout court ;)

et pour le texte qui depasse c'est le height qui doit etre trop petit pour la taille de la police. avec 20px, tout s'arrange

pas du tout strix , avec mon code j'ai bien un menu horizontal mais il n'est pas centré dans mon div .

non damouille pour l'alignement c'est bien display: block et un float left comme j'ai fait , j'ai jamais eu de soucis d'alignement , je veux juste que mon menu horizontal soit centré dans mon div...

en gros comment on fait pour centrer horizontalement un menu horizontal ? :)

et avec ce satané internet explorer , les cases de mon menu sont en escalier avec que sous firefox elles sont bien alignées

Citation:

---

pas du tout strix , avec mon code j'ai bien un menu horizontal

---

En effet, erreur de ma part...

Edit :
voilà une solution :
tu insères ta div class="s" dans une div id="test" (pour mon exemple) et tu donnes un width fixe à .s. Ainsi c'est ta div .s qui ce centre et non ul ou li. Je crois qu'il est quasiment impossible de centrer un menu horizontal en gardant des width fixes, car la propriété display:inline empèche justement cela.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#test { width:100%; } .s { margin: 0 auto 0 auto; padding: 0; width:420px; } ul { margin: 0; padding:0; list-style-type: none; text-align:center; } li { text-align: center; display:block; float:left; height: 20px; width: 100px; border: 1px solid gray; margin: 0 2px 0 0; padding:0; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10

<div id="test"> <div class="s"> <ul> <li><a href="">x</a></li> <li><a href="">y</a></li> <li><a href="">z</a></li> <li><a href="">u</a></li> </ul> </div> </div>

---

Oui moi aussi sa me rapelait une discussion^^.

Pour ton escalier, j'ai eu le même problème mais pas pour des liens, et c'était juste sous IE aussi. En fait c'était par rapport à mes largeurs (width) que j'avais définis pour des div intégré les uns dans les autres. La largeur totale des div contenus devait être supérieure à celle du div conteneur.
Du coup IE me les m'était à la ligne mais comme j'avais un margin-left, il me le mettait à la même distance de la gauche, le seul effet était, comme tu dis, un escalier.

http://www.developpez.net/forums/sho...d.php?t=379844