[Résolu] Menu horizontal

Salut,

Bon, suite à des mésaventures avec les floats (et afin de minimiser ceux-ci car IE gère trop mal leur enchaînement), je cherche à faire un menu ayant les spécificités suivantes :
- horizontal
- qui prenne (en apparence au moins) la largeur de la page
- éventuellement centré
- fait avec une structure ul / li / a
- avec un rollover sur chaque lien (ex. : passage de bleu sur blanc à blanc sur bleu)

- Pour l'instant (et je préfèrerais que ça continue), il n'y a pas de float dans ce menu. Pour l'horizontalité, pas de pb avec list-style-type : none et display : inline. Pour la largeur de la page, j'ai simplement appliqué un width : 100% à mon ul. Pour le centré, un text-align : center sur le ul marche impeccable.

- En revanche, comment faire pour que le padding des liens ne déborde pas de la liste ? NB : Le but est que l'effet graphique de rollover passe bien, sans débordement et sans tricherie sémantique, que ce soit sous IE ou sous Firefox. Je me doute bien qu'il doit y avoir un pb sur l'imbrication des boîtes, mais là je sèche un peu. Toutes mes tailles sont en em.
Modifié le 16 Jan 2005 - 18:26

Selon mon expérience agenda.cocotier.ch Pour que IE gère bien les floats il faut:
-mettre que des float left
-pas employer de padding-left ou right dans les float
-Si on met les float dans un conteneur avec une border il faut enlever le nombre de px du border au premier container float, car ie prend en compte les borders...


Pour les padding c'est la merde... moi j'ai mis deux espace avant les liens.. mais il y a sûrement une meilleur solution.

J'utilise sans problème des floats left et right aussi avec IE... et je n'ai jamais eu de problème d'enchainement pour le moment (à part l'arrondi au supérieur qui donne parfois au total de 101%).

Le padding horizontale marche parfaitement mais il s'additionnent à la largeur, tout comme les boders. Il suffit de le savoir

Sinon 2 secondes sur google et j'ai trouvé ça :
http://moronicbajebus.com/playground/cssplay/hormenu/
Il ne reste plus qu'a l'adapter un peu et le tour est joué.

a écrit :
Le padding horizontale marche parfaitement mais il s'additionnent à la largeur, tout comme les boders. Il suffit de le savoir cligne

Mais pas de façon identique sur tout les navigateurs...

gagarine a écrit :
Le padding horizontale marche parfaitement mais il s'additionnent à la largeur, tout comme les boders. Il suffit de le savoir cligne

Mais pas de façon identique sur tout les navigateurs...
Soient ils j'ajoutent, soit ils ne s'ajoutent pas :
Lorsqu'ils s'ajoutent (c'est à dire selon le Modèle de boites standard), ils s'ajoutent de le même manière partout.
Lorsqu'ils ne s'ajoutent pas (c'est à dire sur Internet Explorer)... ils ne s'ajoutent pas !

Désolé de ne pas m'être parfaitement exprimé... vraiment...
Modifié le 11 Jan 2005 - 15:48

Avec l'utilisation de float et rollover, je te propose de t'inspirer de celui que je réalise actuellement pour un ami musicien qui fonctionne correctement: visible ici

La feuille de style est là. C'est la partie commentée "Menu de navigation principal avec rollover".

Dans cet exemple tu peux aussi supprimer le div (ce que j'ai prévu de faire) au profit de ul#menu.
Modifié par Igor (19 May 2006 - 16:20)

Oui mais en dtd strict ils s'ajouttent aussi sous ie puisqu'on repasse en modèle de boite standart (à condition de virer le préambule xml au début).

littlesam a écrit :
Oui mais en dtd strict ils s'ajouttent aussi sous ie puisqu'on repasse en modèle de boite standart (à condition de virer le préambule xml au début).

Oui.
Précisions pour ce qui est du prologue XML, il est obligatoire uniquement dans ces cas là :
* le document est traité en tant qu'XML ;
* que rien n'est spécifié au niveau serveur ;
* et que l'encodage n'est pas en utf-8 ou en utf16.
-> Voir explications sur un billet de Laurent Denis

Bref, pour tous les documents actuels (99% des sites dits "XHTML" ne sont que du HTML), le prologue n'a pas sa place sauf si l'encodage l'exige.

Salut,

J'ai réussi à obtenir l'effet souhaité.[mode vieux sage chinois]La simplicité mène à la vérité.[/mode vieux sage chinois]

Bon si ça intéresse certains, voilà les principes que j'en ai tiré pour avoir un menu horizontal centré sans float (si je dis des bêtises, corrigez moi) :

- le ul reste "standard", on met seulement un text-align : center pour que le menu soit centré dans la page et un width : 100% pour remplir la largeur (et un list-style-type : none pour virer les puces)
- les li sont en display : inline pour être à l'horizontale
- pour les a, on les laisse "standard", en jouant simplement sur les attributs qui changent sur hover
- et là le grand secret : on met le même padding vertical au ul, aux li et aux a pour que le hover passe bien, en restant dans les limites verticales de la liste

Voili voilou Si mes pérégrinations mentales peuvent servir à certains d'entre vous, c'est toujours ça de pris

Salut,

Il y a un point qui me dérange sur ton menu.
Apparemment, les liens sont en display: inline. Pour un menu qui serait plutôt de type "boutons".... (enfin c'est ce que j'ai cru comprendre... je sais pas pourquoi )

Et donc moi ce qui me gène, c'est que les liens de ton menu ne seront actif que sur le texte, et pas sur toute la surface du bouton.

Vois-tu ce que je veux dire ?

Evidemment je crois qu'il est impossible d'obtenir des boutons mieux avec une mise en page sans float.... mais c'est justement l'avantage du float .

enfin voila, ca fait pas avancer grand chose, mais bon ....