Bonjour à tous !
Je souhaite adapter mon site internet à plusieurs tailles d'écran, au minimum un écran 15 pouces, soit 800px de largeur.
Le corps de mon site ayant une hauteur fixe, je souhaite simplement que mon site rétrécisse de manière proportionnelle sans que les éléments ne se déplacent.
Je travaille en ce moment sur ma page index, qui est très simple et ne comporte que des images et un petit bout de texte. Mais c'est déjà un casse-tête pour moi !
Les images de mon site rétrécissent bien en proportion de la largeur de la fenêtre du navigateur… sauf que mon bloc footer monte tout en haut de ma maquette !!! De plus, sa hauteur reste fixe malgré les changements de largeurs de fenêtre.
En analysant sur Firebug, je constate que mon bloc section semble avoir disparu, bien que les images qu'il contient sont encore là.
Par ailleurs, la hauteur de mon body reste fixe aussi. Mais cela ne me dérange pas car les images contenues à l'intérieur rétrécissent bien proportionnellement.
La disparition du bloc section semble expliquer la montée en haut de mon bloc footer. Mais pourquoi donc mon bloc section disparait ?
Voici mon code sur mes pages html et css (j'ai retiré les images et mis des couleurs de fond transparent, pour plus de simplicité):
Dans le css du body, quand je supprime "max-" dans le code "max-height:60em" (ligne 9), la section réapparait, le footer revient en bas mais le footer semble sorti du body (sa couleur jaune transparente devrait se mélanger au bleu transparent du body, mais elle est mélangée au blanc du fond). Et sa position et sa hauteur ne varient pas non plus.
Quelqu'un aurait-il une solution pour que mon bloc footer reste en bas du body tout en rétrécissant avec les images de mon site ?
D'avance, merci beaucoup !
Je souhaite adapter mon site internet à plusieurs tailles d'écran, au minimum un écran 15 pouces, soit 800px de largeur.
Le corps de mon site ayant une hauteur fixe, je souhaite simplement que mon site rétrécisse de manière proportionnelle sans que les éléments ne se déplacent.
Je travaille en ce moment sur ma page index, qui est très simple et ne comporte que des images et un petit bout de texte. Mais c'est déjà un casse-tête pour moi !
Les images de mon site rétrécissent bien en proportion de la largeur de la fenêtre du navigateur… sauf que mon bloc footer monte tout en haut de ma maquette !!! De plus, sa hauteur reste fixe malgré les changements de largeurs de fenêtre.
En analysant sur Firebug, je constate que mon bloc section semble avoir disparu, bien que les images qu'il contient sont encore là.
Par ailleurs, la hauteur de mon body reste fixe aussi. Mais cela ne me dérange pas car les images contenues à l'intérieur rétrécissent bien proportionnellement.
La disparition du bloc section semble expliquer la montée en haut de mon bloc footer. Mais pourquoi donc mon bloc section disparait ?
Voici mon code sur mes pages html et css (j'ai retiré les images et mis des couleurs de fond transparent, pour plus de simplicité):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
<title>Test maquette vide</title>
<link href="css/a_entrer.css" rel="stylesheet" type="text/css" media="only screen">
</head>
<body>
<section>
<a href="b_menu.html" title="Entrez dans mon site">
<img src="#" alt="Entrer"/>
</a>
</section>
<footer>
<p><a href="h_mentions_legales.html">Mentions légales</a></p>
</footer>
</body>
</html>html{
background:white;
width : 100%;
height: 100%;
}
body{ /*balises du bloc body */
max-width:80.625em; /* 1290px = 80.625em */
max-height:60em; /* 960px = 60em */
min-width:50em; /* 800px = 50em */
min-height:37.286875em; /* 596.59px = 37.286875em */
margin:0px auto;
position:relative;
background:rgba(0,255,255,0.5); /*bleu transparent*/
}
section{ /*paramètres du bloc section*/
width:100%; /* 1290px = 100% du body */
height:100%; /* 914px = 96.7195767% du body */
margin:0px auto;
background:rgba(255,0,255,0.5);/*rose transparent*/
}
section a{ /*paramètres du bouton Entrer dans le bloc section*/
background:white;
width:16.744186%; /* 216px = 16.744186% de la section */
height:16.744186%;
margin-top:49.6%;
margin-left:68.2170543%; /* 880px = 68.2170543% de la section */
width:16.744186%; /* 216px = 16.744186% de la section */
position : absolute;
}
footer{
height:3.9153439%; /* 37px = 3.9153439% du body*/
padding-top:0.7%; /* 9px = 0.7% du body*/
color:rgb(0,0,0);
text-align:center;
background:rgba(255,255,0,0.5);/*jaune transparent*/
}
footer a{
color:rgb(0,0,0);
text-decoration:none;
}Dans le css du body, quand je supprime "max-" dans le code "max-height:60em" (ligne 9), la section réapparait, le footer revient en bas mais le footer semble sorti du body (sa couleur jaune transparente devrait se mélanger au bleu transparent du body, mais elle est mélangée au blanc du fond). Et sa position et sa hauteur ne varient pas non plus.
Quelqu'un aurait-il une solution pour que mon bloc footer reste en bas du body tout en rétrécissant avec les images de mon site ?
D'avance, merci beaucoup !