Médiaforma

Mise en page complète avec bas de page fixe

Print Friendly

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.

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

No comments yet.

Leave a Reply