1485 sujets

Web Mobile et responsive web design

Bonjour,
en tant que webmestre d'un site de génealogie (http://www.cgcp.asso.fr/) je voudrais le passer sur mobiles.
Tout n'est pas rose et je n'est fait que le menu de droite. J'ai un souci avec le menu de gauche se trouve flottant verticalement.
Comment le caler en haut ? merci.

----Frames
<frameset cols="195,*" rows="*" frameborder="no">
<frameset rows="110,*" cols="*" frameborder="no">
<frame name="entete" scrolling="no" noresize src="./menu_n/CGCP_entete.php" id="entete">
<!--
<frame name="Le_Menu" scrolling="auto" marginwidth="0" src="./menu_n/menu_base_accueil.php" id="Le_Menu">
-->
<frame name="Le_Menu" scrolling="auto" marginwidth="0" src="./menu_n/menu_0.php" id="Le_Menu">

</frameset>
<frame name="CGCP_Menu" src="./menu_n/menu_arbre.php" id="CGCP_Menu">
<noframes>

/* CSS pour mobiles ==========================================================*/
@media screen and (min-width: 200px) and (max-width:790px) {
body {
margin-bottom : 0;
margin-left : 5px;
margin-right : 5px;
margin-top : 2px;
color : navy;
font-size : 12pt;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
/* passer tous les éléments de largeur fixe en largeur automatique */
body, element1, element2 {
width: auto;
margin: auto;
padding: auto;
}
/* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
max-width: 100%;
}
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
img {
height: auto; width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
code, pre, samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
element1, element2 {
float: none !important;
width: auto !important
}
/* masquer les éléments superflus */
.hide_mobile {
display: none !important;
}
@media (max-width:640px) and (orientation: landscape) {
body {
-webkit-text-size-adjust:70%;
}
}
@media (max-width:640px) and (orientation: portrait) {
body {
-webkit-text-size-adjust:50%;
}
}
/* --------------------------------------------------*/
/* balise normales mobiles */
@media screen and (max-width:790px) {
table {
font-size : 15pt;
}
td {font-size : 15pt;}

}
.soumettre {
width:550px;
height:80px;
align : center;
line-height:60pt;
text-align: left;
font-size:50pt;
line-width:100%;
border: 7px solid #006;
border-color : red;
background: #66ffff;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 54px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
Bonjour,

Vous devriez utiliser les balises de code pour intégrer du code dans vos messages. Smiley smile
Pour votre site, le resize du menu de droite n'est pas bon.
De toute façon, ça semble difficile de faire un responsive sur votre site. Est-ce que c'est pertinent de le faire ?
Bonjour Mukos,
Merci
Vous avez regardé le site sur PC.
Mon problème est sur mobile.
Cependant votre réponse m'intéresse car ce resize fonctionne depuis 2 ans sur tous les navigateurs.
Cordialement
Bonsoir,
c'est aussi mon intention, mais il y a un très gros travail pour un simple bénévole retraité...
On verra avec les mois d'hiver...
Merci