18041 sujets

Questions générales et questions de débutants

Menu horizontal déroulant en CSS

Bonjour bonjour!

Je débute plus ou moins dans le CSS, aussi j'ai été très contente de trouver ce tuto de Menu horizontal déroulant en CSS : http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm . Mais le hic c'est que je ne parviens pas à le centrer dans ma page. J'ai essayé pas mal de choses, mais rien ne marche, je me demande si c'est possible Smiley ohwell ! Auriez-vous une idée pour centrer ce menu s'il vous plaît? Smiley smile
Modifié par Blopette (28 Dec 2007 - 14:03)
Bonjour,

#menu {
width: 600px;
margin: 0 auto;
}
par exemple.

Voilà pour une solution générique.
Pour une solution adaptée, on ne peut rien dire sans voir la page en question (la tienne, pas celle du tutoriel).
Tu peux centrer le menu en donnant à div#menu une largeur de 500px et en utilisant les marges automatiques (comme dans le code que je donne ci-dessus). Par contre, ça ne fonctionne que si div#menu n'est pas positionné en absolu.

Et aussi: supprimer le positionnement absolu pour div#menu fait que l'apparence de divers éléments du menu devient incohérente, à cause de height: 100% qui trainent ici ou là (appliqués notamment aux liens et aux li) et qu'il faudrait supprimer.
Ooooh ça marche!! Merci beaucoup Smiley smile Pourquoi ça fonctionne avec width:500px et pas width:800px??


EDIT : en fait... mon site est bien centré sous Opera et Mozilla, mais avec IE 6 pas du tout... J'ai essayé de mettre le tout dans un bloc centré, puis avec text-align:center, mais ça ne doit pas être comme ça. Smiley confus
Blopette a écrit :
Pourquoi ça fonctionne avec width:500px et pas width:800px??

Parce qu'on centre le bloc tout entier. À l'intérieur, les divers items du menu restent alignés à gauche.
(On peut faire le test en donnant une couleur de fond voyante à #menu, et en testant différentes largeurs: 800px, 600px, 500px...)

Blopette a écrit :
en fait... mon site est bien centré sous Opera et Mozilla, mais avec IE 6 pas du tout...

Tiens, encore quelqu'un qui a oublié de valider son code HTML.
Le code en question commence ainsi:
<html><head>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Neopets-Forever : tutos pour graphiques</title>

Il faut corriger les problèmes suivants:
- le Doctype doit être placé tout au début, et pas à l'intérieur de head;
- le Doctype doit être complet, avec URL de la DTD.

On pourra se reporter à cette page pour générer un squelette de page HTML valide:
http://css.alsacreations.com/outils/squelettor/index.php

Sinon, il y a beaucoup de problèmes avec cette page:
- c'est dommage de faire des blocs de 800px de large, en résolution 800x600 ça ne tiendra pas (résolution de 800px de large, largeur disponible de 770px au maximum...);
- il serait plus simple de travailler avec un conteneur global en largeur fixe;
- le menu n'étant plus positionné en absolu, les sous-menus flottants repoussent le texte du bloc de contenu en dessous d'eux (il faudrait positionner les sous-menus en absolu, par rapport à leur conteneur positionné en relatif...);
- etc.
Modifié par Florent V. (28 Dec 2007 - 17:55)
Effectivement il y a beaucoup de problèmes à corriger Smiley lol

Merci beaucoup pour toutes ces infos et ces conseils, ça m'est très utile! Smiley biggrin
Sujet clos
Aller à