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. Lire la suite
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 :
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Layout CSS by PUShAUNE</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>
On va maintenant voir à quoi correspond tout ça. Tout d’abord, on insère le doctype et on ouvre les balises html et head
<!DOCTYPE HTML> <html> <head>
Ensuite le charset et le titre de la page (un peu d’autopromotion ne fait jamais de mal).
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Layout CSS by PUShAUNE</title>
Et enfin on lie la feuille de style CSS avec notre .html (n’oubliez pas de refermer la balise head) :
<link rel="stylesheet" href="style.css" type="text/css" /> </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 :
<header>
<div class="centercolumn">
Ceci est un super header propulsé par PUShAUNE
</div><!-- .centercolumn -->
</header>
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 :
html, body, p{
margin:0;
padding:0;
}
On stylise ensuite le header en lui donnant une couleur de fond, une marge interne verticale et en centrant le texte :
header{
padding:25px 0px;/*Marge verticale*/
background-color:#99A79A; /*Couleur de fond*/
text-align:center;/*texte centré*/
}
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.
.centercolumn{
width:930px;/*Taille de la colonne centrée moins le padding*/
background-color:#FFFFFF;/*Couleur de fond*/
margin: auto; /*centrer la colonne*/
padding:25px;/*margin interne*/
}
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 :
<div id="content" >
<div class="centercolumn">
</div><!-- .centercolumn -->
</div><!-- #content -->
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 :
#content{
background-color: #59A79A;/*Couleur de fond*/
}
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 :
p{
font:1em Tahoma, Geneva, sans-serif;/* Taille et police de caractère utilisées */
margin-bottom:1em;/* Marge inférieure */
}
Le footer
Même combat que pour le header. Après le contenu, dans votre index.html :
<footer>
<div class="centercolumn">
Ceci est un super footer propulsé par PUShAUNE
</div><!-- .centercolumn -->
</footer>
Il ne nous reste plus que la balise footer à customiser à l’aide du css :
footer{
padding:25px 0px;/*Marge verticale*/
background-color:#59719A; /*Couleur de fond*/
text-align:center;/*texte centré*/
}
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à 
Super tuto.
Tout est bien expliqué et on s’y retrouve rapidement !
Vivement le prochain !!
Merci Guillaume