Aide concernant un menu qui ne se centre pas...

Florian57 · 14 Juillet 2008

Bonjour à tous,

cela fait plusieurs jours que je suis "grave en galère" () 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 · 14 Juillet 2008

Salut,

Je crois qu'un petit tour par là : http://css.alsacreations.com/Galeries-de-menus-en-CSS serait salutaire

**iNCiTE Web** · 14 Juillet 2008

Hello

En passant ton code au validateur (ici) il y a déjà un peu de boulot :cool: 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:

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 :

float: left; display: block;

Florian57 · 14 Juillet 2008

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 · 14 Juillet 2008

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** · 14 Juillet 2008

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 · 15 Juillet 2008

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

bibi-arnaud · 15 Juillet 2008

Salut Flo, c'est Adeb0402

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** · 15 Juillet 2008

Aaaargh j'avais pondu une réponse complète mais elle a disparu !! :mad2:

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 · 15 Juillet 2008

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)

encore merci en tout cas

Florian57 · 15 Juillet 2008

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 )

**iNCiTE Web** · 15 Juillet 2008

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 ?

Florian57 · 15 Juillet 2008

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

Modifié 15 Juillet 2008 par Florian57

Florian57 · 15 Juillet 2008

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** · 15 Juillet 2008

<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...

9 Août 2008

..

Dudu · 10 Août 2008

..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 · 12 Août 2008

..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 · 13 Août 2008

Salut

Penses tout de même à mettre des guillemets autour de tes valeurs!

<balise attribut="valeur">contenu</balise>

**iNCiTE Web** · 13 Août 2008

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

Connexion

Aide concernant un menu qui ne se centre pas...

Sujets conseillés

Florian57

ghost

iNCiTE Web

Florian57

Florian57

iNCiTE Web

Florian57

bibi-arnaud

iNCiTE Web

Florian57

Florian57

iNCiTE Web

Florian57

Florian57

iNCiTE Web

Guest ..7-19..

Dudu

Florian57

Dudu

iNCiTE Web

Veuillez vous connecter pour commenter

Parcourir

Activité