Bonjour,
Je suis actuellement en train de mettre en forme un petit site graphiquement très simple.
J'ai souhaité organisé mon css avec un entête, un contenu et un pied de page. Le problème, c'est que mon footer ne se place pas tout à fait en bas de la page comme avec je le souhaite.
Pour mieux comprendre, voici mon css.
Chat et Video sont des div placées à l'intérieur de la div contenu.
Ce que je voudrais c'est que le footer se mette en bas de la page, quelque soit la taille de l'entête et que ça s'adapte à la taille de l'écran.
Ce que l'on voit en gris c'est le body.
Si quelqu'un peut m'aider ce serait sympa car je galère vraiment là.
MErci d'avance.
PS: pour mieux comprendre le résultat et mon pb, voici une capture.
Je suis actuellement en train de mettre en forme un petit site graphiquement très simple.
J'ai souhaité organisé mon css avec un entête, un contenu et un pied de page. Le problème, c'est que mon footer ne se place pas tout à fait en bas de la page comme avec je le souhaite.
Pour mieux comprendre, voici mon css.
/* --- HEADER --- */
#header {
/*position:relative;*/
background-color:#baeb20;
height:60px;
}
/* --- FOOTER --- */
#footer{
clear:both;
background:white;
/*position: relative;*/
bottom: 0;
width:100%;
font-size:20px;
text-align:center;
}
/* --- GENERIC --- */
* { margin: 0; padding: 0; }
#header, #contenu, #footer{display:block;}
body {
font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
background-color:#adc0a3;
}
/*------------------ Mettre en page la fenetre de choix entre la video et le chat ------------*/
#chat {
float: left;
background-color:blue;
height:400px;
width:50%;
position:relative;
}
#video {
float: left;
background-color:green;
height:400px;
width:50%;
position:relative;
}
#chat img, #video img{
position: absolute;
top : 50%; /* la moitié de la hauteur du bloc qui la contient */
left : 50%; /* la moitié de la largeur du bloc qui la contient */
margin-top : -175px; /* la moitié de la hauteur de l'image */
margin-left : -250px; /* la moitié de la largeur de l'image */
height: 350px; /* spécifiez la hauteur de l'image, une bonne attitude à prendre */
width: 500px; /* spécifiez la largeur de l'image, une bonne habitude à prendre */
}
/*--------------------------------------------------------------------------------------------*/
/* --- CONTENU --- */
#contenu {
height:80%;
}Chat et Video sont des div placées à l'intérieur de la div contenu.
Ce que je voudrais c'est que le footer se mette en bas de la page, quelque soit la taille de l'entête et que ça s'adapte à la taille de l'écran.
Ce que l'on voit en gris c'est le body.
Si quelqu'un peut m'aider ce serait sympa car je galère vraiment là.
MErci d'avance.
PS: pour mieux comprendre le résultat et mon pb, voici une capture.