Aller au contenu

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


Florian57

Sujets conseillés

Bonjour à tous,

cela fait plusieurs jours que je suis "grave en galère" (:D) 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!!

Lien vers le commentaire
Partager sur d’autres sites

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;

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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);

}

Lien vers le commentaire
Partager sur d’autres sites

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)

:P

encore merci en tout cas

Lien vers le commentaire
Partager sur d’autres sites

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é par Florian57
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

  • 4 semaines plus tard...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...