Menu qui s'affiche mal sur smartphone

Bonjour,
sur toutes les pages de mon site, mon menu horizontal s'affiche mal.
Avez vous une idée du ou des paramètres à modifier pour qu'il s'affiche sur toute la longeur.
Voici le site en question
http://www.champ-magnetique-pulse.fr

Merci de vos réponses.
pour le menu , j'ai une partie comme cela:

<style type="text/css">.wifeo_pagemenu > a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover > a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique > a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover > a{color:#FFFFFF;font-weight:bold;text-decoration:none} .wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none} .wifeo_conteneur_menu{border-spacing:0px} .wifeo_conteneur_menu{width:91%;position: relative;left: 108px;padding:-2px 50px 10px 78px;display:table;background-color:#507899;height:50px} .wifeo_conteneur_menu a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0 5px;text-align:center;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease} .wifeo_pagemenu, .wifeo_rubrique{float:left;position:relative;width:10%;text-align:center;display:table;border-top:1px hidden #594AFE;border-bottom:1px hidden #0900AE;background-image:url();background-position:center} .wifeo_sousmenu{width:100%;left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1} @media screen and (min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}} .wifeo_pagemenu:hover, .wifeo_rubrique:hover{background-color:#40607A;border-top:1px hidden #8172FF;border-bottom:1px hidden #3122D6} .wifeo_pagesousmenu{width:auto;text-align:center;display:table} .wifeo_sousmenu a{background-image:url();background-position:center;text-align:center;background-color:#8172FF;border-top:1px hidden #A99AFF;border-bottom:1px hidden #594AD7} .wifeo_sousmenu a:hover{background-image:url();background-position:center;background:#A99AFF;border-top:1px hidden #D1C2FF;border-bottom:1px hidden #8172D7} .wifeo_rubrique:hover > .wifeo_sousmenu{opacity:1;top:50px;visibility:visible}</style>

et une comme cela

<nav><div class='wifeo_conteneur_menu'><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr'>Accueil</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/solution-naturelle-soulager-soulagement-douleur-arthrose.html'>La solution</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/presse-en-parle-champ-magnetique-pulse-magnetotherapie.html'>La presse en parle</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/avis-des-medecins-champ-magnetique-pulse-magnetotherapie.html'>L'avis des m&eacute;decins</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/etudes.html'>Etudes scientifiques</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/temoignages-champ-magnetique-pulse-magnetotherapie.php'>T&eacute;moignages</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/materiel-champ-magnetique-pulse-magnetotherapie.html'>Mat&eacute;riel</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/essai-gratuit.html'>Essai gratuit</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/partenaires-champ-magnetique-pulse-magnetotherapie.html'>Partenaires</a></div><div class='wifeo_pagemenu'><a href='http://www.champ-magnetique-pulse.fr/contact/'>Contact</a></div></div></nav>

fanny64 a écrit :
Bonjour,
sur toutes les pages de mon site, mon menu horizontal s'affiche mal.

Salut...

pourrais-tu être plus précise

Mon menu horizontal s'affiche bien sur mon ecran de pc.
Par contre sur smartphone, mon menu se met sur 2 lignes et non sur toute la largeur de l''écran ( comme ma page).
Bon, ma page ne se met pas automatiquement au format de l'ecran d'un smartphone ( ça sera une prochaine question), mais si je la reduit avec mes doigts sur l'ecran tactile ça le fait, par contre le menu, rien n'y fait..

fanny64 a écrit :

Par contre sur smartphone, mon menu se met sur 2 lignes et non sur toute la largeur de l''écran ( comme ma page).

Euh.... sur toutes la largeur ? donc l'écriture va devenir tout petit petit

Tu voulais pas dire "toute la hauteur" ? parce que généralement un menu sur smartphone prend toute la hauteur hein.. avec l'hamburger
Modifié par JENCAL (27 Sep 2016 - 10:26)

je sais pas faire un menu hamburger...
pas grave si c'est tout petit.
Tu peux m'aider
Fanny

Ok Ok, donc le but est d'avoir un menu sur une seul et unique ligne, et pas un element par ligne avec x lignes (x = le nombre d'item du menu)

Le problème vient de ta classe wifeo_pagemenu qui est contenue dans ta div wifeo_conteneur_menu

ta classe wifeo_conteneur_menu a comme propriété

display: table;

mais tes div enfant wifeo_pagemenu ont également ce diplay display: table;
Le but est de leur mettre

 display: table-cell;

à la place, et à ce moment là ton menu sera sur une ligne, par contre il faudra l'adapter pour que chaque texte d'items rentre dans leur cellule d'où le menu sur la hauteur.
Modifié par JENCAL (27 Sep 2016 - 10:43)

bon, j'ai pas tout compris...en gros des que je vois table , je remplace par table-cell ?
Tous ou certain table ? tu peux m'l identifier ceux que je dois changer svp ?

<style type="text/css">.wifeo_pagemenu > a{color:#FFFFFF;text-decoration:none} .wifeo_pagemenu:hover > a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_rubrique > a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique:hover > a{color:#FFFFFF;font-weight:bold;text-decoration:none} .wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none} .wifeo_conteneur_menu{border-spacing:0px} .wifeo_conteneur_menu{width:91%;position: relative;left: 108px;padding:-2px 50px 10px 78px;display:table;background-color:#507899;height:50px} .wifeo_conteneur_menu a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0 5px;text-align:center;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease} .wifeo_pagemenu, .wifeo_rubrique{float:left;position:relative;width:10%;text-align:center;display:table;border-top:1px hidden #594AFE;border-bottom:1px hidden #0900AE;background-image:url();background-position:center} .wifeo_sousmenu{width:100%;left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1} @media screen and (min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}} .wifeo_pagemenu:hover, .wifeo_rubrique:hover{background-color:#40607A;border-top:1px hidden #8172FF;border-bottom:1px hidden #3122D6} .wifeo_pagesousmenu{width:100%;text-align:center;display:table} .wifeo_sousmenu a{background-image:url();background-position:center;text-align:center;background-color:#8172FF;border-top:1px hidden #A99AFF;border-bottom:1px hidden #594AD7} .wifeo_sousmenu a:hover{background-image:url();background-position:center;background:#A99AFF;border-top:1px hidden #D1C2FF;border-bottom:1px hidden #8172D7} .wifeo_rubrique:hover > .wifeo_sousmenu{opacity:1;top:50px;visibility:visible}</style>

fanny64 a écrit :
tu peux m'l identifier ceux que je dois changer svp ?

je te l'ai précisé dans le poste juste avant

JENCAL a écrit :
mais tes div enfant wifeo_pagemenu ont également ce diplay display: table;
Le but est de leur mettre
display: table-cell;

wifeo_pagemenu
Modifié par JENCAL (27 Sep 2016 - 11:13)

ok, j'ai modifié, mais maintenant sur pc, le menu ne va pas jusqu'au bout droit, et sur smartphone, je suis sur une ligne, mais le texte se touche...je dois modifier quoi? désolé, je suis une quiche ..

là par contre y'a bcpp de chose à modifier ...

le menu ne va pas jusqu'a droite, mais c'est parce que ce qui est à droite "dépasse" de la taille du body

le body fait la taille de l'écran (l'écran de départ, sans dézoomé) mais ce qui dépasse c'est parce que y'a un width:1000px sur un ou plusieurs éléments, et c'est ça qui dépasse. Donc en gros c'est pas au menu de s'adapter (qui, d'ailleurs, prend la bonne taille par rapport au body) mais ce sont les éléments qui eux dépasse de la taille d'origine.. pas simple pas simple.

malheureusement j'ai pas le temps de codé et de rentrer dans les détails, j'ai simplement vue en surface.
Modifié par JENCAL (27 Sep 2016 - 11:45)

Ou alors !!!!

si tu veux garder le tout. tu met un width: 1000px; sur wifeo_conteneur_menu


mais c'est tout sauf responsive....

sur une tablette sa sera pas top..

du coup, je reprends ton titre sujet : Mon menu s'affiche mal sur smartphone ... En faite, c'est le seul qui s'affichait correctement au final
Modifié par JENCAL (27 Sep 2016 - 11:51)

tant pis , j'abandonne,,,trop dur pour moi
j'ai remis comme avant, tant pis pour le responsive
Merci encore de ton temps.
Fanny

fanny64 a écrit :
tant pis , j'abandonne,,,trop dur pour moi
j'ai remis comme avant, tant pis pour le responsive
Merci encore de ton temps.
Fanny

Nan ! il faut pas se décourager pour quelques pixels !!
Modifié par JENCAL (27 Sep 2016 - 11:53)

oui, mais je n'y arrive pas !

Rebonjour
comme je n'arrive pas a rendre lisible ce fichu menu horizontal sur les smartphones. Je pense a une idée:
Je désire garder ce menu horizontal sur les grands ecrans ( pc, tablettes), mais je désire le cacher sur les petits ecrans ( smartphone) , car j'ai un menu vertical ( qui fonctionne)
Comment faire pour ça ?
Fanny

Salut,

Pour cela, il faut utilisé les média quéries, voici une liste des différentes taille à appliquer (tu n'est pas obliger de toutes les mettres, mais au moins les principales)

petit exemple :

@media only screen and (max-width:800px) { // Uniquement sur les écrans d'un maximum de 800 px sur la largeur
   .wifeo_conteneur_menu{
        display:none; // On applique display none
    }
}

!!! Ne pas oublier le type de media dans ta balise link css !!!

<link rel="stylesheet" media="screen and (max-width: 800px)" href="styles.css" type="text/css" />

par exemple
Modifié par JENCAL (28 Sep 2016 - 10:14)

j'ai mis ça dans ma page de style:

/*=============================================responsive================================*/

@media only screen and (max-width:480px) { // Uniquement sur les écrans d'un maximum de 480 px sur la largeur
.wifeo_conteneur_menu{
display:none; // On applique display none
}
}

et ça dans ma page index

<link rel="stylesheet" media="screen and (max-width: 480px)" href="css/styles.css" type="text/css" />

mais ça fait rien .

EDIT : AUTANT POUR MOI

les commentaires en css ne sont pas avec double slashs

//

mais avec l'étoile

/* */

Désolé, je me crois en C#
Modifié par JENCAL (28 Sep 2016 - 14:22)

Si la feuille de style est prise en compte sinon ça serait trés moche.
Après la suite de ta phrase, je comprends pas..

J'ai édité mon message Fanny, enlève les commentaire et cela fonctionne;