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