Centrer le menu en CSS

Bonjour,
J'ai chopé le code sur alsacreations pour mon menu en CSS mais je n'ai jamais réussi à centrer mon menu horizontal. Que dois-je modifier, ajouter ou supprimer dans ce menu ??

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, Ã  modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 25%;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #006699;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #0066CC;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

Merci
Modifié par mikablissgratt (28 Mar 2008 - 07:00)

Bonjour,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

As-tu trouvé et lu l'article de FAQ qui parle du centrage?

Bonne continuation

Merci administrateur... Voilà, c'est fait, j'ai rééditer...
J'ai cherché avant de poster ce message mais je n'ai pas trouvé ce qu'il me fallait exactement. Il y avait toujours quelques différences, je me suis donc décidé à poster ce message sur le forum en espérant trouver de l'aide...

Merci

Bonjour mikablissgratt,

As-tu également tenté d'appliquer les solutions proposées par la FAQ ?

http://forum.alsacreations.com/faq/faq-74-Comment-centrer-horizontalement-un-element-.html

Si oui, ou si tu ne parviens pas à mettre en place, n'hésites pas à poster ton code dans son ensemble (html/css) ou mieux un lien vers ta page de test

Bon courage,
Cdt,
Sylvain

Salut,

Il serai préférable d'avoir une version en ligne afin qu'on puisse meiux apréhender le probleme et mieu le cible.

Néanmoin essaye ceci : margin:auto;

voila ++

J'ai essayé le margin:auto mais rien a faire. Le menu se comporte bien avec Firefox mais pas avec IE.
mon site: http://www.blissrock.o-n.fr[/url]

C'est vraiment chiant cet IE quand même !!

Merci...
Modifié par mikablissgratt (28 Mar 2008 - 22:10)

m'ouarff ta frame, si je peut te donner un conseil enleve la ...

Hello,

C'est sympa ce site, ça me rappelle le web de 1999.

Personnellement, je te proposerais de tout recommencer:
1. Le design est consternant. Si si, sincèrement. On a bien sûr le droit de ne pas être graphiste ou professionnel du Web, mais mieux vaut ne pas tomber dans l'excès de n'importe quoi pour autant. Dans le doute, faire sobre, et virer tous les éléments inutiles de mauvaise décoration (par exemple: le «Welcome» affreux et les éclairs gadget).

2. Il serait préférable de se passer de frames. Cela permettra à chaque page d'avoir sa propre adresse dans la barre d'adresse du navigateur, comme ça les utilisateurs pourront mettre des favoris (marque-pages) facilement, et les moteurs de recherche s'y retrouveront mieux.

3. L'utilisation d'un menu déroulant est ici une bêtise. Très concrètement, tu n'en as pas besoin. Seuls deux items ont un sous-menu (et comme ils ne sont pas indiqués visuellement, c'est déroutant), et l'intérêt de donner accès directement aux sous-pages via ce menu déroulant n'est pas évident ici. Donc le menu déroulant me semble être un mauvais choix dans le cas présent.

Bonne continuation.

Oui, c'est vrai, j'suis d'accord avec vous, mais c'est un site pour la fac et on est obligé d'utilisé un menu déroulant en CSS ainsi que les frames. C'est clair que question design, c'est pas énorme, mais bon... j'ai des restrictions pour faire ce site...

En attendant, ça ne me dit pas ce que je dois faire dans le code pour centrer le menu...

Merci

mikablissgratt a écrit :
mais c'est un site pour la fac et on est obligé d'utilisé un menu déroulant en CSS ainsi que les frames.

Ah ben il faudra que la personne qui a imposé ces deux conditions m'explique sa technique pour faire fonctionner un menu déroulant dans une frame de hauteur limitée. Aux dernières nouvelles c'est impossible et les moyens de contournement sont des bidouilles innommables que je n'évoquerai pas ici.

Pour le centrage horizontal, là j'avoue ne pas savoir car ton menu prend presque 100% de la largeur du conteneur. Qu'y a-t-il à centrer dans ce cas?
(Edit: ça semble être la même chose avec IE, à quelques pixels près.)

Une piste toutefois pour IE: tu travailles en mode Quirks, car tes pages ne sont pas formées correctement.
Pour rappel, les principaux navigateurs web fonctionnement avec deux modes de rendu:
- un mode de rendu «à l'ancienne» pour les pages qui n'ont pas de Doctype ou qui ont un Doctype tronqué;
- un mode de rendu «Standards» pour les autres pages.
En gros, il faut toujours travailler en mode Standard sinon c'est la merde.

Là, aucune de tes pages n'a de Doctype, donc ça risque de te poser des problèmes. À lire:
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

PS: moi pour un devoir à la FAQ j'avais fait un mini-site fictif sur PJ Harvey. Heureusement, on ne m'avait pas imposé le combo frames-menu déroulant.

Il a l'air centré sur Mozilla, masi sur IE, le dernier onglet (liens) se met à la ligne. Je ne vois pas pourquoi. C'est pourquoi j'aimerai réduire la largeur en mettant 24% au lieu de 25% dans ce code

#menu dl {

float: left;

width: 25%;

}

puis centrer le menu, mais je ne sais pas comment centrer le menu...

mikablissgratt a écrit :
Il a l'air centré sur Mozilla, masi sur IE, le dernier onglet (liens) se met à la ligne.

Ah tiens, je n'avais pas ça pour ma part. Mais je suppose que dans certaines conditions ça peut être le cas.

mikablissgratt a écrit :
mais je ne sais pas comment centrer le menu...

En fait ça n'est pas tellement possible de centrer horizontalement une suite de bloc flottants, sauf si on connait à l'avance la largeur totale des éléments à centrer. Et comme cette largeur totale, dans ton cas, varie d'un navigateur à l'autre (outre le fait qu'elle est en pourcentage + rajout possible de pixels), ça coince.

À la rigueur, le plus simple serait d'utiliser un tableau en width: 100% (ou moins si tu souhaites un effet de centrage) pour ton menu. Mais ça demande de réécrire le menu, voire d'utiliser un autre modèle de menu déroulant, et je ne sais pas si c'est dans tes cordes?

Non, ce n'est pas dans mes cordes, j'ai pris le menu tel quel sur ce site.