Médiaforma

Un bas de page en bas de la page

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à utiliser des balises <div> pour créer une page comportant un en-tête, un bas de page, un menu et une zone de contenu. Tout cela fonctionne très bien, mais il faut bien avouer que le bas de page ne se trouve pas en bas de la page. Du moins pas dans tous les cas. Il se contente de suivre le menu et la zone de contenu. Dans cette rubrique, je vous propose de définir un bas de page qui s’affichera systématiquement en bas de la page.

Pour cela, nous allons raisonner sur un code plus simple que le précédent. Ici, nous n’utiliserons qu’une balise de contenu et une balise de bas de page. Comme vous pouvez le voir, la balise de bas de page est incluse dans la balise de contenu. Contrairement aux rubriques précédentes, où les balises de contenu et de bas de pages étaient au même niveau hiérarchique.

Ce document HTML utilise la feuille de styles styles8.css. Examinons son contenu.

Les lignes 1 à 4 indiquent que le document s’étale sur toute la hauteur de la page.

Les lignes 6 à 10 définissent les caractéristiques de la balise <div> d’identifiant contenu, c’est-à-dire de la balise qui englobe le bas de page. Cette balise occupera toute la hauteur disponible et elle aura une largeur de 800 pixels.

Les lignes 12 à 20 définissent les caractéristiques de la balise <div> d’identifiant pied, c’est-à-dire du bas de page. Cette balise est positionnée de façon absolue. En initialisant les propriétés bottom et left à 0, le pied de page sera toujours dans la partie inférieure de la fenêtre. Les dimensions du pied de page sont fixées à 800 pixels sur 60 et une couleur d’arrière-plan lui est affectée pour bien voir ses limites :

Il ne reste plus qu’à afficher le résultat dans un navigateur :

Comme vous pouvez le voir, le pied de page reste ancré à la partie inférieure de la page lorsque la fenêtre du navigateur est redimensionnée.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply