Version complète: sur le forum Webmaster Hub : Aide concernant un menu qui ne se centre pas...
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Florian57
lundi 14 juillet 2008 à 16:02
Bonjour à tous,

cela fait plusieurs jours que je suis "grave en galère" (biggrin.gif) avec un menu sur mon site que j'essaie de centrer.
Néanmoins, j'ai beau modifier le CSS comme je veux, le problème persiste. Il va tout à gauche de la page

Voilà la page en question : http://www.tousgrenat.com/essai2.htm

Y'a t-il une personne au grand coeur qui pourrait examiner mon CSS et ma page HTML ( ajoutez moi sur MSN : flo.5-7_AT_hotmail.fr )

Je vous avoue que c'est assez urgent car je pars bientôt en vacances et jaimerais publier le menu sur le site avant d'y partir. Seulement, ça fait au moins une semaine que je suis "bloqué" sur ce problème.

Merci d'avance, je vous remercie...

Florian!!
ghost
lundi 14 juillet 2008 à 17:25
Salut,

Je crois qu'un petit tour par là : http://css.alsacreations.com/Galeries-de-menus-en-CSS serait salutaire wink.gif
iNCiTE Web
lundi 14 juillet 2008 à 17:35
Hello

En passant ton code au validateur (ici) il y a déjà un peu de boulot cool.gif tu dois par exemple choisir une déclaration de DOCTYPE valide sinon les navigateurs passent en mode "quirks" et le rendu peut être vraiment aléatoire unsure.gif
Tu appelles aussi 2 fois la feuille de style menu1.css (j'ai vu qu'il y aussi un menu pour la Ligue 1, LOL, un projet ?)

Ton problème vient du positionnement "absolute" je pense, ton menu n'est pas dans un conteneur donc les éléments <a> sont alignés depuis le bord du navigateur...
Essaie de supprimer les "left:" et position:absolute" de tes éléments <a> du menu et remplaces les par :
CODE
float: left; display: block;
Florian57
lundi 14 juillet 2008 à 17:54
salut, merci à vous deux.

Pour le menu Ligue 1, ah bon ?
C'est pas un projet, ça doit dater de lan dernier peut-être ?

Je vais essayer de changer certains trucs et je vous tiendrai au courant

bonne soirée!!!merci
Florian57
lundi 14 juillet 2008 à 21:33
J'dois avouer que je trouve pas là, après pas mal d'essais, la bannière veut pas se centrer...
Ca me rend ouf :-(

iNCiTE Web
lundi 14 juillet 2008 à 23:07
Ca donne quoi en remplaçant les absolute et left par float et display ?
Je l'ai fait sur ton code et ça fonctionne...
Florian57
mardi 15 juillet 2008 à 11:30
bonjour,

je débute dans le CSS (enfin, t'as pu le remarquer), donc peut-être ais-je mal remplacé par rapport aux conseils que tu m'as donné ?

incite-web, tu peux me filer le code en question qui fonctionne ? Ca m'aiderait pas mal...

CODE
@charset "utf-8";
/* CSS Menu - TOUS GRENAT ! */

#header {
background: url(image/header.jpg) no-repeat;
width:760px;
height:155px;
}
.menu
{
width : 760px;
height : 34px;
background: url(image/bck.jpg) no-repeat #882341;
}

.Accueil
{
position : absolute;
width : 52px;
height : 34px;
background-image : url(image/accueil.png);
}
.Accueil:hover
{
position : absolute;
width : 52px;
height : 34px;
background-image : url(image/accueil1.png);
}

.Ligue2
{
position : absolute;
width : 52px;
height : 34px;
left : 59px;
background-image : url(image/ligue2.png);
}
.Ligue2:hover
{
position : absolute;
width : 52px;
height : 34px;
left : 59px;
background-image : url(image/ligue21.png);
}

.Calendrier
{
position : absolute;
width : 64px;
height : 34px;
left : 110px;
background-image : url(image/calendrier.png);
}
.Calendrier:hover
{
position : absolute;
width : 64px;
height : 34px;
left : 110px;
background-image : url(image/calendrier1.png);
}

.Effectif
{
position : absolute;
width : 48px;
height : 34px;
left : 173px;
background-image : url(image/effectif.png);
}
.Effectif:hover
{
position : absolute;
width : 48px;
height : 34px;
left : 173px;
background-image : url(image/effectif1.png);
}

.Transfert
{
position : absolute;
width : 60px;
height : 34px;
left : 221px;
background-image : url(image/transfert.png);
}
.Transfert:hover
{
position : absolute;
width : 60px;
height : 34px;
left : 221px;
background-image : url(image/transfert1.png);
}

.Supporters
{
position : absolute;
width : 67px;
height : 34px;
left : 281px;
background-image : url(image/supporters.png);
}
.Supporters:hover
{
position : absolute;
width : 67px;
height : 34px;
left : 281px;
background-image : url(image/supporters1.png);
}

.Palmarès
{
position : absolute;
width : 59px;
height : 34px;
left : 348px;
background-image : url(image/palmares.png);
}
.Palmarès:hover
{
position : absolute;
width : 59px;
height : 34px;
left : 348px;
background-image : url(image/palmares1.png);
}

.Vidéos
{
position : absolute;
width : 51px;
height : 34px;
left : 407px;
background-image : url(image/videos.png);
}
.Vidéos:hover
{
position : absolute;
width : 51px;
height : 34px;
left : 407px;
background-image : url(image/videos1.png);
}

.Pronostics
{
position : absolute;
width : 60px;
height : 34px;
left : 458px;
background-image : url(image/pronostics.png);
}
.Pronostics:hover
{
position : absolute;
width : 60px;
height : 34px;
left : 458px;
background-image : url(image/pronostics1.png);
}
.Partenaires
{
position : absolute;
width : 78px;
height : 34px;
left : 518px;
background-image : url(image/partenaires.png);
}
.Partenaires:hover
{
position : absolute;
width : 78px;
height : 34px;
left : 518px;
background-image : url(image/partenaires1.png);
}
.Forum
{
position : absolute;
width : 55px;
height : 34px;
left : 596px;
background-image : url(image/forum.png);
}
.Forum:hover
{
position : absolute;
width : 55px;
height : 34px;
left : 596px;
background-image : url(image/forum1.png);
}



Voilà, il s'agit de mon CSS au tout départ, donc celui qui me met la bannière et le menu à l'extrème gauche de cette page : http://www.tousgrenat.com/essai2.htm .

Incite-web, c'est en changeant ce code que t'as réussi à centrer :o
bibi-arnaud
mardi 15 juillet 2008 à 13:02
Salut Flo, c'est Adeb0402 smile.gif

essaie de mettre dans ton code CSS de la DIV du menu ces 2 lignes supplémentaires :

MARGIN-LEFT:AUTO;
MARGIN-RIGHT:AUTO;


@++
iNCiTE Web
mardi 15 juillet 2008 à 18:00
Aaaargh j'avais pondu une réponse complète mais elle a disparu !! mad2.gif

Donc je te disais d'abord de supprimer le double appel à "menu1.css" dans ton header, ça met le bazar ne serait-ce que pour moi pour regarder avec firebug et l'édition en temps réel...

Ensuite c'est tout simple, tu retires tous les "left:" et les "position:absolute" et pour chaque élément <a> tu ajoutes "display: block" et "float: left"
J'ai fait le test ça fonctionne parfaitement (à part ta table qui suit qui est trop large)

Mais depuis hier tu as bidouillé essai2.html donc ton image header n'est plus centrée, il faut remettre margin:auto pour #header (idem d'ailleurs pour .menu)

Ton code mériterait un grand nettoyage, pour la clarté, pour la validité HTML ; il y a des mélanges CSS, des propriétés HTML ou obsolètes directement dans le code, n'utilise pas d'accents pour les noms des classes CSS etc.


CODE
@charset "utf-8";
/* CSS Menu - TOUS GRENAT ! */

#header {
background: url(image/header.jpg) no-repeat;
width: 760px;
height: 155px;
margin: auto;
}

.menu
{
width : 760px;
height : 34px;
background: url(image/bck.jpg) no-repeat #882341;
margin: auto;
}

.Accueil
{
display: block;
float: left;
width : 52px;
height : 34px;
background-image : url(image/accueil.png);
}
.Accueil:hover
{
display: block;
width : 52px;
height : 34px;
background-image : url(image/accueil1.png);
}

.Ligue2
{
display: block;
float: left;
width : 52px;
height : 34px;
background-image : url(image/ligue2.png);
}
.Ligue2:hover
{
display: block;
width : 52px;
height : 34px;
background-image : url(image/ligue21.png);
}

.Calendrier
{
display: block;
float: left;
width : 64px;
height : 34px;
background-image : url(image/calendrier.png);
}
.Calendrier:hover
{
display: block;
width : 64px;
height : 34px;
background-image : url(image/calendrier1.png);
}

.Effectif
{
display: block;
float: left;
width : 48px;
height : 34px;
background-image : url(image/effectif.png);
}
.Effectif:hover
{
display: block;
width : 48px;
height : 34px;
background-image : url(image/effectif1.png);
}

.Transfert
{
display: block;
float: left;
width : 60px;
height : 34px;
background-image : url(image/transfert.png);
}
.Transfert:hover
{
display: block;
width : 60px;
height : 34px;
background-image : url(image/transfert1.png);
}

.Supporters
{
display: block;
float: left;
width : 67px;
height : 34px;
background-image : url(image/supporters.png);
}
.Supporters:hover
{
display: block;
width : 67px;
height : 34px;
background-image : url(image/supporters1.png);
}

.Palmarès
{
display: block;
float: left;
width : 59px;
height : 34px;
background-image : url(image/palmares.png);
}
.Palmarès:hover
{
display: block;
width : 59px;
height : 34px;
background-image : url(image/palmares1.png);
}

.Vidéos
{
display: block;
float: left;
width : 51px;
height : 34px;
background-image : url(image/videos.png);
}
.Vidéos:hover
{
display: block;
width : 51px;
height : 34px;
background-image : url(image/videos1.png);
}

.Pronostics
{
display: block;
float: left;
width : 60px;
height : 34px;
background-image : url(image/pronostics.png);
}
.Pronostics:hover
{
display: block;
width : 60px;
height : 34px;
background-image : url(image/pronostics1.png);
}
.Partenaires
{
display: block;
float: left;
width : 78px;
height : 34px;
background-image : url(image/partenaires.png);
}
.Partenaires:hover
{
display: block;
width : 78px;
height : 34px;
background-image : url(image/partenaires1.png);
}
.Forum
{
display: block;
float: left;
width : 55px;
height : 34px;
background-image : url(image/forum.png);
}
.Forum:hover
{
display: block;
width : 55px;
height : 34px;
background-image : url(image/forum1.png);
}
Florian57
mardi 15 juillet 2008 à 18:09
Bien sympa Incite-web, ça s'est centré :

http://www.tousgrenat.com/essai2.htm

Par contre, une dernière faveur, après je te laisse tranquille.
Sur la page, regarde en dessous de la bannière, à droite. Y'a un logo du club.
Normalement, le reste du menu est collé dessus, c'est possible de le faire en le mettant donc un peu plus à droite (le menu pour le rattacher au logo de metz à droite)

tongue.gif
encore merci en tout cas
Florian57
mardi 15 juillet 2008 à 18:21
Incite-web, désolé d'abuser de ta gentillesse.
En fait, le menu + bannière devrait être comme ceci : http://doc.webfizz.fr/menu/

Dans le CSS que tu m'as filé, la case "palmarès" et "vidéo" ont disparu.
Est-ce possible de me les faire "réapparaitre" en m'alignant avec le reste ?

(c'est ma dernière faveur please smile.gif )
iNCiTE Web
mardi 15 juillet 2008 à 18:25
Je te l'avais dit, sûrement à cause de tes accents... change partout vidéos en videos et palmarès en palmares (dans le css + dans le fichier du menu)
Tu as compris pour le centrage ou bien tu as recopié bêtement ? tongue.gif
Florian57
mardi 15 juillet 2008 à 18:30
OK merci, je vais modifier ça.

Non j'ai recopié bêtement en effet, je t'avoue que je m'occupe du CSS une fois par année (pour changer menu + bannière), ce que je prefere sur mon site, c'est écrire des articles, je m'intéresse pas énormément à tout ça, donc effectivemen j'capte pas trop.

Donc, pour que ça se centre, je dois faire qq chose de spécial tu m'as dis?


EDIT
C'est bon, ils apparaissent !!

http://www.tousgrenat.com/essai2.htm

je te remercierai jamais assez incite-web, très sympa de ta part smile.gif
Florian57
mardi 15 juillet 2008 à 19:01
Une dernière question idiote.

Quel code dois-je copier coller sur les autres pages de mon site pour faire apparaître le menu et la bannière sur les autres pages ?

(je vais le faire page par page...)

merci
iNCiTE Web
mardi 15 juillet 2008 à 19:33
CODE
<div id="header"></div>

<div class="menu">
<a class="Accueil"
href="http://www.tousgrenat.com/index.htm"></a>
<a class="Ligue2"
href="http://www.tousgrenat.com/ligue2.htm"></a>
<a class="Calendrier"
href="http://www.tousgrenat.com/calendrier.htm"></a>
<a class="Effectif"
href="http://www.tousgrenat.com/effectif.htm"></a>
<a class="Transfert"
href="http://www.tousgrenat.com/transfert.htm"></a>
<a class="Supporters"
href="http://www.tousgrenat.com/supporters.htm"></a>
<a class="Palmares"
href="http://www.tousgrenat.com/palmares.htm"></a>
<a class="Videos" href="http://www.tousgrenat.com/video.htm"></a>
<a class="Pronostics"
href="http://www.tousgrenat.com/pronostics.htm"></a>
<a class="Partenaires"
href="http://www.tousgrenat.com/partenaires.htm"></a>
<a class="Forum" href="http://fc-metz.forumpro.fr/"></a>

</div>


Et donc sinon tu veux pas virer <link href="menu1.css" rel="stylesheet" type="text/css" /> ???? il y a une raison ?

Tu dois aussi pouvoir faire quelque chose pour la table sous le menu qui dépasse, ça fait pas top...
..7-19..
samedi 9 août 2008 à 21:28
<center>menu</center>
tongue.gif
..
Dudu
dimanche 10 août 2008 à 06:48
..7-19.. si c'est pour donner des conseils véreux, ne te sens pas obligé de poster.
Surtout lorsque le sujet semble déjà résolu depuis presque 1 mois.
Florian57
mardi 12 août 2008 à 22:12
CITATION(Dudu @ dimanche 10 août 2008 à 07:48) *
..7-19.. si c'est pour donner des conseils véreux, ne te sens pas obligé de poster.
Surtout lorsque le sujet semble déjà résolu depuis presque 1 mois.


Salut, oui finalement j'ai réussi à centrer :

http://www.tousgrenat.com
Dudu
mercredi 13 août 2008 à 05:36
Salut

Penses tout de même à mettre des guillemets autour de tes valeurs! wink.gif
HTML
<balise attribut="valeur">contenu</balise>
iNCiTE Web
mercredi 13 août 2008 à 08:54
Le document n'est pas valide, donc je pense que les manques de guillemets n'ont pas beaucoup d'effet !
Validator

Par contre quand il faudra tout corriger, ça sera du boulot alors autant avoir le réflexe tout de suite c'est vrai tongue.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.