Titre: Centrer un menu
Posté par: zonda le le 10-12-2009 a 14:59:34
bonjour à tous,
je cherche le moyen de centrer un menu horizontal (suite de boutons) de manière qu'il apparaisse au centre de la page - comme le reste du contenu, à la fois sur IE et FF (versions actuelles).
Voici l'adresse de la page : http://autodrome-cannes.com/default-b.asp
Elle a été créée avec Front Page et je suis très débutant, donc, il y aurait beaucoup à faire, mais pour l'instant mon problème est juste celui ci-dessus...
Merci poar avance si vous pouvez m'aider ! |
Titre: Re:Centrer un menu
Posté par: zonda le le 12-12-2009 a 15:51:37
Hmmmm.... ça n'a pas l'air facile, donc ? J'espère que quelqu'un pourra me suggérer une solution.
Merci par avance. |
Titre: Re:Centrer un menu
Posté par: KB le le 13-12-2009 a 16:17:47
salut,
cela n'a rien de difficile. c'est juste qu'avec Frontpage, la chose la plus simple devient un vrai calvaire étant donné la très mauvaise qualité du code.
Pour faire simple, tu dois donner une largeur a ton div dont l'id est "navcontainer" et ensuite le centrer avec un margin:auto ! |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 11:48:28
Merci de ta réponse KB.
J'ai fixé cette largeur en pixels (1000), mais un problème demeure : si le container se centre bien, en revanche à l'intérieur du div "navcontainer" les boutons ne sont pas disposés au centre, mais justifiés à gauche.
Y a-t-il un moyen pour que la suite des boutons se centre dans le div "navcontainer"?
Merci pour ton aide. |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 12:19:21
| tu dois également enlever le margin:0pt dans les style du menu dont l'id est "navlist" et le centrer avec un margin:auto. |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 12:46:05
Merci, avec ce code :
<style>
#navcontainer {
margin:auto;
width: 1000px;
}
</style>
...entre les balises <head> et </head>,
et avec : "margin: auto" pour le div "navlist"
le menu de ma page
http://autodrome-cannes.com/default-b.asp
est en effet centré ; mais cela fonctionne uniquement sous IE et pas sous FF. C'est déjà très bien...mais...peut-on faire "lire" ce centrage à FF ?
Une idée ? |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 13:37:10
| donne aussi une largeur a ton menu |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 14:28:32
oui.. mais dans quelle partie du code HTML ?
j'ai essayé en introduisant entre <head>et </head> :
#navlist {
text-align: center;
width: 1000px;
margin:0 0;
padding: 0 0;
}
et dans <ul id = navlist..." (etc).
mais sans résultat sous FF... |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 14:56:53
dans le head :
/*le css de ton menu*/
#navlist ul{
position:relative;
width:950px;
margin:auto
} |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 15:09:15
Merci KB ; mais étant débutant là je cale : que désigne-ton par "le CSS" de mon menu ?
J'ai maintenant ceci dans head :
<style>
#navcontainer {
margin:auto;
width: 1000px;
}
#navlist ul{
position:relative;
width:950px;
margin:auto
}
</style>
Mais sans résultat. J'imagine que la syntaxe n'est pas correcte ? peux-tu me dire ce qui ne va pas ? |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 15:54:20
C'est correct mais il y a des erreurs dans ton code dans le ul : (width: "1000px")
de mon coté, en ajoutant seulement une largeur (comme tu l'as fait, cela fonctionne). |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 16:23:48
Désolé, mais je ne comprends pas ; peux-tu être plus explicite ?
Dois-je maintenir l'information de largeur dans le head, et aussi dans le ul id, ou n'en faut-il qu'à un seul endroit et lequel ...? |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 16:36:56
tu as supprimer le width dans le style de l'<ul> et c'est très bien. Il était en effet mal écrit et inutile puisque nous l'avons spécifié dans le <head>.
par contre, j'ai fait une erreur dans mon post précédent et je m'en excuse, au lieu de:
#navlist ul{
position:relative;
width:950px;
margin:auto
}
je voulais ecrire:
#navcontainer ul{
position:relative;
width:950px;
margin:auto
}
cela devrait désormais fonctionner. |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 17:08:58
En effet, maintenant j'ai ceci dans mon head :
#navcontainer {
margin:auto;
width: 1000px;
}
#navcontainer ul{
position:relative;
width:950px;
margin:auto
}
et c'est davantage centré sur FF - pas totalement cependant, mais c'est déjà bien mieux.
Bizarrement, ça change selon le niveau de zoom d'affichage ; pour un certain niveau, le dernier bouton est renvoyé à la ligne, mais pas si on zoome plus grand ou plus petit. Curieux. Cela doit être plus compliqué à résoudre.
Merci beaucoup en tous cas, tu m'as déjà bien aidé et je veux pas abuser de ton temps. |
Titre: Re:Centrer un menu
Posté par: KB le le 14-12-2009 a 18:05:03
| j'ai mis width:950px un peu a l'oeil ! tu peux jouer sur cette valeur pour le placer mieux. |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 18:33:46
Merci beaucoup KB, je vais tâtonner un peu. J'y vois unpeu plus clair.
:D |
Titre: Re:Centrer un menu
Posté par: zonda le le 14-12-2009 a 18:53:36
Ok ; merci de ton aide, j'ai compris certaines choses ; je pense avancer maintenant en tâtonnant un peu.
:D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|