Médiaforma

All posts tagged footer fixe

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

Dans cette rubrique, nous allons aller plus loin en définissant un bandeau ancré dans la partie supérieure de la page, un pied de page ancré dans la partie inférieure de la page, ainsi qu’un menu et une zone de contenu qui se partagent l’espace restant.

Le principe reste le même : une balise <div> occupe toute la hauteur disponible dans le navigateur et contient les autres balises, c’est-à-dire le bandeau, le menu, le contenu et le bas de page.

Examinons le code CSS.

  • Les lignes 1 à 4 indiquent que le document s’étale sur toute la hauteur de la page.
  • Les lignes 6 à 10 indiquent que le conteneur fait 800 pixels de large et s’étale sur toute la hauteur disponible.
  • Les lignes 12 à 21 définissent les caractéristiques du bandeau. Ce dernier est positionné de façon absolue, en haut et à gauche de la fenêtre. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur qui lui est propre et une marge de 10 pixels entoure son contenu.
  • Les lignes 23 à 31 définissent les caractéristiques du menu. Ce dernier est positionné de façon absolue, à 60 pixels du bord supérieur et à gauche. Il est large de 130 pixels, a une couleur spécifique et une marge interne de 10 pixels.
  • Les lignes 33 à 41 définissent les caractéristiques de la zone de contenu. Tout comme les autres divisions, elle est positionnée de façon absolue, à 60 pixels du bord supérieur et à 150 pixels du bord gauche. Sa largeur est égale à 650 pixels. Elle a une couleur spécifique et une marge interne de 10 pixels.
  • Enfin, les lignes 43 à 52 définissent les caractéristiques du pied de page. Ce dernier est positionné de façon absolue, en bas et à gauche de la zone d’affichage du navigateur. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur spécifique et une marge interne de 10 pixels.

Il ne reste plus qu’à afficher le document HTML dans un navigateur et à constater que le pied de page reste ancré à la partie inférieure de la fenêtre lorsqu’elle est redimensionnée.


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.