Template CSS : une colonne centrée avec header et footer

Posté par PUShAUNE le 25 décembre 2011

15 commentaires :)

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 :

<!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à ;)

Summary
Article Name
Template CSS : une colonne centrée avec header et footer
Description
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.
Nicolas AUNE
Nicolas AUNE
PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

15 commentaires

  1. Le , Elliott a dit :

    Merci pour ce tuto, ça m’est bien utile dans mes cours aujourd’hui

  2. Le , Eliézer Muhaya a dit :

    C’est chic mais ne serait il pas possible de de redimensionner les éléments de footer ??

    • Le , PUShAUNE a dit :

      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

  3. Le , ndiaye a dit :

    bonjour monsieur moi mon probleme est que je ne parviens pas a aligner mon footer correctement

  4. Le , Mbairasseù a dit :

    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

    • Le , PUShAUNE a dit :

      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 ;)

  5. Le , Johann a dit :

    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é !

    • Le , PUShAUNE a dit :

      Bonjour Johann,
      Essaye d’appliquer un clear:both; à ton footer.

      • Le , Johann a dit :

        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…

        • Le , PUShAUNE a dit :

          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 !

          • Le , Johann a dit :

            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 !

          • Le , Johann a dit :

            C’est bon j’ai trouvé !! Encore une fois un grand Merci pour votre aide qui m’a été précieuse !!

  6. Le , Anne Legale a dit :

    c’est hyper complet ! Je prends le tout

  7. Le , Guillaume a dit :

    Super tuto.
    Tout est bien expliqué et on s’y retrouve rapidement ! :)
    Vivement le prochain !!

    • Le , PUShAUNE a dit :

      Merci Guillaume ;)

Sois pas timide, lâche tes com’ !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.