pb de position de footer (Créer un compte)

(J’intègre le CSS au code HTML qui suit, exemple à ne pas reproduire en situation réelle sous peine de se faire fâcher par le W3C^^)




body {
width:100% /*Prend toute la largeur de l’écran*/
background: le background souhaité pour le .bottom;
margin:0 /*on oblige le contenu du body à venir se coller en haut, à droite et à gauche, pour que le fond n’apparaisse qu’en bas de la page*/
}

<div id="maincontainer"><!--On créé une div venant recouvrir toute la partie du body qu'on ne veut pas voir, toujours pour réserver le background au .bottom. Je choisi cette ID là, mais ça peut être une autre ;) -->

#maincontainer {
width:100%; /*toute la largeur de l’écran*/
background:le background souhaité pour le fond. Actuellement sur votre site, c’est un gris foncé;
overflow:hidden; /*On ne précise pas de hauteur, mais on force la div à s’adapter à ce qu’elle contient*/
margin:0; /*on oblige le maincontainer à se coller au body, sans marges indésirables*/
}

NB: on ne referme pas le maincontainer tout de suite, on attend d’y avoir inséré la ou les div du contenu principal du site.

<div id="container"><!--On créé une div qui contiendra le site: header, zone d'affichage des pages et articles, sidebar etc.-->

#container {
width:950px; /*on limite la largeur à celle souhaitée pour le contenu du site. En principe, ne pas dépasser les 980px, parce que ça génère une barre de défilement horizontal car les dimensions dépassent celles d’un écran en 1024px*/
margin:auto; /*on oblige le contenu du site à se centrer quelque soit la taille des écrans*/
overflow:hidden; /*comme précédemment, on oblige la div à s’adapter à la hauteur de son contenu et on ne précise pas de hauteur fixe*/
background:le background souhaité. Sur votre site actuel, c’est blanc. Si rien n’est précisé, prendra le background défini pour le #maincontainer*/
}

</div><!–On referme le container quand on y a inséré tout ce qu'on souhaitait (pages, articles, sidebar etc)

</div><!--On referme le maincontainer, sans y intégrer le footer, qui viendra en dessous. Du coup, le background du maincontainer s'arrête pour laisser la place à celui du "body", qui n'est autre que celui qu'on veut pour le ".bottom". Magique non? ^^-->

<div id="footer"><!--On ouvre le footer -->

#footer {
width:100% /* toute la largeur de l’écran*/
background:transparent/*laisse apparaître le background du « body »*/
overflow:hidden; /* on l’oblige à s’adapter au contenu du « .bottom »*/
margin:0;/*Vient se coller en bas du #maincontainer*/
margin-bottom: à adapter en fonction de l’écart minimum souhaité entre les dernières lignes du « .bottom » et le bas du navigateur*/
}

<div class="bottom">
<!--Le contenu du .bottom-->

.bottom {
width:950px;/*on prend la même taille que celle du #container, pour donner l’illusion d’un seul et même bloc*/
margin:auto;/*on centre le « .bottom », qui vient se caler dans l’alignement du #container*/
overflow:hidden;/*on oblige la div à s’adapter en hauteur à son contenu, donc  pas de hauteur définie (sauf si vous souhaitez en mettre une spécialement là, je ne sais pas ce que vous avez à mettre dedans^^) */

</div><!--On referme le bottom-->

</div><!--On referme le footer-->

<!--on referme le body-->

Construction HTML de l’astuce:

   
       <div id="maincontainer">
           <div id="container"><div>
       </div>
       <div id="footer">
           <div class="bottom"></div>
       </div>