1448 sujets

Web Mobile et responsive web design

Pages :
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>


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


Salut...

pourrais-tu être plus précise Smiley lol
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..
upload/58391-ecrantelep.jpg
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 Smiley ravi

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)
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 Smiley smile 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 ... Smiley decu

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 Smiley biggol
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 Smiley bawling
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 Smiley bawling


Nan ! il faut pas se décourager pour quelques pixels Smiley angryfire !! Smiley frappe
Modifié par JENCAL (27 Sep 2016 - 11:53)
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 . Smiley decu
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..
Pages :