[RÉGLÉ] Menu horizontal qui se decale en fonction des navigateurs

[flou81]

Bonjour

Sur mon site : http://www.codep81ffessm.fr , le menu horizontal se décale vers la droite en fonction des navigateurs et sur tablette , il est presque hors du site.
Auriez vous une idée pour remédier à cela ?
Merci encore

[PhilJ]

Re : Menu horizontal qui se decale en fonction des navigateurs

Bonjour,

Sur mon site [...] le menu horizontal se décale vers la droite en fonction des navigateurs [...]

Dans votre feuille de style template.ccs, vers la ligne 192, vous avez une directive qui décale le menu de 600 px vers la droite :

.top-menu {

height: 33px;
left: 600px;
line-height: 45;
margin: 0 auto 17px;
padding: 12px 0;
position: absolute;
top: 77px;
width: 740px;

}

Remplacez la valeur de left par 0 (zéro) :

.top-menu {

left: 0;

}

et sur tablette , il est presque hors du site

Le template siteground-j16-42 ne contient pas les codes qui permettraient au site d'être correctement accessible sur appareils mobiles — sauf sur tablette de type iPad en mode paysage, car c'est le standard du web (largeur 1024 px).



Cordialement,



PhilJ

[flou81]

Re : Menu horizontal qui se decale en fonction des navigateurs

Bonjour et merci pour votre aide

Malheureusement, sur Chrome, c'est toujours décalé vers la droite.

sauf sur tablette de type iPad en mode paysage

C'est pareil, le menu est bien à droite du site

[PhilJ]

Re : Menu horizontal qui se decale en fonction des navigateurs

C'est normal : vous n'avez pas changé la valeur indiquée, qui est toujours à 600 px.

[flou81]

Re : Menu horizontal qui se decale en fonction des navigateurs

Effectivement, je ne pensais plus à Crawlprotect.
J'ai bien mis à 0 ; sur tablette, le menu s'est recentré, mais sur Firefox et Chrome il sort du site coté gauche.

[PhilJ]

Re : Menu horizontal qui se decale en fonction des navigateurs

Effectivement, je ne pensais plus à Crawlprotect.
J'ai bien mis à 0 ; sur tablette, le menu s'est recentré, mais sur Firefox et Chrome il sort du site coté gauche.

C'est réglé maintenant avec Firefox et Chrome. Si vous ne le voyez pas, rafraîchissez le cache du navigateur (= CTRL+F5).

[flou81]

Re : Menu horizontal qui se decale en fonction des navigateurs

C'est réglé maintenant avec Firefox et Chrome. Si vous ne le voyez pas, rafraîchissez le cache du navigateur (= CTRL+F5).

C'est fait . Le menu sort un peu à gauche, mais je vais le laisser comme çà.
Quel aurait été le code pour le centrer ?

Merci encore.

[gg97469]

Re : Menu horizontal qui se decale en fonction des navigateurs

C'est fait . Le menu sort un peu à gauche, mais je vais le laisser comme çà.
Quel aurait été le code pour le centrer ?

Merci encore.

Bonjour,

A essayer, toujours dans template.css :

.top-menu {
    height: 33px;
    line-height: 45;
    margin: 38px auto 21px;
    padding: 12px 0;
    position: absolute;
    top: 77px;
    width: 1800px;

RAPPEL : Toujours tenter les modifications avec un logiciel type firebug avant de les faire en dur.

[PhilJ]

Re : Menu horizontal qui se decale en fonction des navigateurs

Bonjour,

C'est fait . Le menu sort un peu à gauche [...] Quel aurait été le code pour le centrer ?

Les 2 petites modifications suivantes devraient bien convenir pour cela :

.top-menu {

left: 0;
width: 100%;

}

...avec les codes couleurs suivants :
—

• ROUGE : directive à supprimer totalement.
• ORANGE : valeur à modifier.

Cordialement,



PhilJ

PS : attention, message modifié (un peu tardivement).

[flou81]

Re : Menu horizontal qui se decale en fonction des navigateurs

Waouhhh!!!! C'est nickel !!!

Merci beaucoup de ton aide.

[PhilJ]

Re : Menu horizontal qui se decale en fonction des navigateurs

Merci beaucoup de ton aide.

Pas de quoi .

Ce que vous pouvez faire aussi, c'est utiliser un taille de caractères un peu plus importante pour les liens de ce menu, car avec seulement 11px c'est un peu limite.

=> Toujours dans le même template.css, cette fois vers la ligne 661 :

#sgmenu ul.menu li a,
#sgmenu ul.menu li a:link,
#sgmenu ul.menu li a:visited {

font-size: 13px;

}

...quitte à remonter l'ensemble du menu de quelques pixels, avec (ligne ~ 192) :

.top-menu {

top: 70px;

}