Template CSS : une colonne centrée avec header et footer
Ce tutoriel a pour but de créer une page avec un header, un contenu et un footer centrés. Les fonds perdus de ces trois sections occupent toute la largeur du navigateur pour adapter le design à toutes les résolutions.
Niveau : débutant
Code : HTML / CSS
Démo : c’est par ici
Source : c’est par là
Création des fichiers
Pour commencer, créez un dossier quelque part sur votre bureau disque dur. Dans ce dossier doivent se trouver deux fichiers :
- index.html
- style.css
Squelette HTML / la balise head
Ouvrez votre .html avec l’éditeur de votre choix et entrez-y :
On va maintenant voir à quoi correspond tout ça. Tout d’abord, on insère le doctype et on ouvre les balises html et head
Ensuite le charset et le titre de la page (un peu d’autopromotion ne fait jamais de mal).
Et enfin on lie la feuille de style CSS avec notre .html (n’oubliez pas de refermer la balise head) :
Le header
On va maintenant attaquer la page en elle-même en commençant par le header (partie supérieure où l’on peut trouver le logo ou le menu).
Entre les balises body, nous allons entrer ça :
La balise header prend toute la largeur de la page pour y contenir un fond (ici la couleur kaki).
La div .centercolumn va nous servir à centrer le contenu dans le header.
On va maintenant appliquer un peu de CSS à ces balises. Tout d’abord, une reset sheet toute simple :
On stylise ensuite le header en lui donnant une couleur de fond, une marge interne verticale et en centrant le texte :
On crée ensuite la colonne centrée, en lui donnant une largeur et en appliquant des marges automatiques.
Attention ! Ces marges auto ne fonctionnent que pour l’alignement horizontal !
Histoire de la différencier on va aussi lui donner un fond blanc.
Et voilà, nous avons maintenant un header centré !
Le contenu
Suite au header, nous allons donc créer le corps de la page, celui qui contiendra le contenu.
Ajouter donc cela juste avant la fermeture de la balise body :
Vous remarquerez que nous réutilisons ici la div .centercolumn. En effet, à quoi bon en créer une nouvelle, identique à celle-là ?
Étant donné que .centercolumn a déjà un style css défini, nous allons nous attarder uniquement sur #content en lui donnant une couleur de fond différente au header :
Nous allons ajouter un peu de contenu dans cette page, histoire de voir de quoi elle a l’air.
Allez donc prendre une quinzaine de paragraphes de Lorem Ipsum pour les placer dans la balise #centercolum.
N’oubliez pas mettre vos paragraphes entre balise p !
Nous allons aussi styliser ces paragraphes :
Le footer
Même combat que pour le header. Après le contenu, dans votre index.html :
Il ne nous reste plus que la balise footer à customiser à l’aide du css :
N’oubliez pas de refermer les balises body et html !
Aller plus loin
Maintenant que vous avez la base, libre à vous de le modifier à votre image et d’y ajouter votre contenu.
Il faudra aussi user du regroupement des sélecteurs css pour simplifier la feuille de style.
J’espère que ce tuto vous aura été utile. Petit rappel, la démo est ici, et les sources là ;)
Tu kiffes ? Alors partage avec tes potes !
Merci pour ce tuto, ça m’est bien utile dans mes cours aujourd’hui
C’est chic mais ne serait il pas possible de de redimensionner les éléments de footer ??
Bonjour Eliézer,
Le footer se redimensionne en fonction de la hauteur de son contenu.
Si vous voulez en changer la largeur, il faut modifier la classe .centercolumn dans style.css
bonjour monsieur moi mon probleme est que je ne parviens pas a aligner mon footer correctement
C’est génial comme tuto. Ne serait il pas intéressant de mettre une position fixed dans le header et lui affecter un width: 100% pour mieux voir.
Cool coe tuto
En effet, on pourrait mettre le header en position:fixed;
Dans ce cas là n’oublie pas de mettre un padding-top à ton contenu pour éviter qu’il ne soit sous ton header ;)
Bonjour, et merci pour ce bon tuto ! Je me remets en selle après quelques années d’éloignement au code. Je comprend bien le fonctionnement de celui ci, mais néanmoins, lorsque j’essaie de séparer la content en deux parties verticalement, et d’affecter une hauteur automatique a mon conteneur, le footer bug… je ne sais pas si je me suis exprimé correctement… en tout cas merci d’avance pour l’aide que vous voudrez bien apporter à mon cas, je l’espère pas encore désespéré !
Bonjour Johann,
Essaye d’appliquer un clear:both; à ton footer.
Merci de votre réponse, j’ai appliqué un clear both a mon footer, et avant ça j’avais même créé une div de classe clear avec attribut CSS clear Both, à la suite des deux ayant pour attribut float. mais pas de changement.
Pour dresser un schéma de ma page, j’ai mon header avec ma div centrée, un conteneur global prenant toute la page entre le header et le footer, un conteneur centré d’une width de 901px a l’intérieur duquel se trouvent 2 divs en float left et right de meme hauteur (570px) et de largeur différentes.
J’aimerai que mon footer colle au bas de la page quelque soit la résolution…
Dans ce cas là, il faut que le footer soit en position:fixed; et bottom:0px;
Par contre attention, sur les petites résolutions le footer risque de passer sur le contenu s’il est trop grand !
Effectivement maintenant il est bien collé en bas :)
En revanche maintenant c’est comme si il ne restait plus que ma div interne au footer et elle s’est collée contre le bord gauche de l’écran. Comme si le footer avait perdu sa propriété de with:100%; … merci encore de votre aide !
C’est bon j’ai trouvé !! Encore une fois un grand Merci pour votre aide qui m’a été précieuse !!
c’est hyper complet ! Je prends le tout
Super tuto.
Tout est bien expliqué et on s’y retrouve rapidement ! :)
Vivement le prochain !!
Merci Guillaume ;)