Avoir un footer toujours en bas de page

Nombreux sont ceux qui se prennent la tête en positionnant leur footer. Selon la hauteur de votre page mais aussi de votre fenêtre votre footer ne se place pas toujours en bas de votre page.

Sachez qu'il existe une solution pour toujours placer votre footer en bas de page qui fonctionne très bien avec TOUS les navigateurs : CSS STICKY FOOTER

La structure HTML de base :

<div id=`wrap`>
    <div id=`header`>
    </div>

    <div id=`main` class=`clearfix`>
    </div>
</div>

<div id=`footer`>
</div>
</pre>
**Le style CSS à appliquer :**
<pre lang=`css`>html, body, #wrap {
    height: 100%;
}

body &gt; #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 150px;  /* MÊME TAILLE QUE LA HAUTEUR DU FOOTER !! */
}

#footer {
    position: relative;
    margin-top: -150px; /* VALEUR NEGATIVE DE LA HAUTEUR DU FOOTER */
    height: 150px;
    clear:both;
}

Et voilà ce n'est pas plus compliqué que ça. Je vous invite à remplir votre page de contenu est de tester en redimensionnant votre page en hauteur vous verrez alors que votre footer sera …

IE 6, Une solution pour la transparence sur les PNG

Malheureusement Internet Explorer 6 ne gère pas la transparence sur les images de type PNG... Assez embêtant me diriez vous ?

Sachez qu'il existe une nouvelle solution pour régler ce problème :

DD belated PNG (Site Officiel ) permet donc de résoudre le problème de transparence de façon très simple via l'utilisation d'un script .js(...)

Télécharger le script PNG FIX

Rendez vous à l'adresse suivante pour obtenir la dernière version : Telecharger DD_belatedPNG

Insertion du script dans votre code

Très simple, il vous suffit d'ajouter les lignes suivante dans votre balise <head></head>

<script src="DD_belatedPNG_0.0.8a.js"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>

Utilisation sur une image transparente

Une fois DD_belatedPNG intégré dans votre code, il ne vous reste plus qu'à ajouter la class png_bg sur vos images pour avoir la transparence. Exemple :

<img class="png_bg" src="mon-image-transparente.png" alt="mon image">

Notez toute fois que dans la cas d'un utilisation pour un background-image le procédé est le même, appliquez la class png_bg à votre div.

Exemple :

<div …