Cet exercice, pas à pas, consiste à créer une interface de site web simple avec un menu vertical dans une colonne à droite et un contenu fluide.
Consignes de l’exercice
Préparation de l’exercice
Créez un nouveau dossier sur votre ordinateur à l’emplacement de votre choix qui servira de dossier racine. Ce dossier devra contenir tous les fichiers de votre exercice. Nommez-le correctement en respectant les règles de nommage d’un fichier sur Internet.
Créez une page .html avec la structure de base.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> </body> </html>
Créez un nouveau fichier .css vierge.
Liez le fichier .css que vous venez de créer à votre page .html.
Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href
si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.
<link rel="stylesheet" type="text/css" href="style.css">
Création du contenu de la page web
En utilisant des éléments de type <div></div>
, recréez la structure illustrée par l’image ci-dessous. Attribuez la classe indiquée sur l’illustration à chaque élément.

<div class="page"> <div class="entete"></div> <div class="colonnes"> <div class="menu"></div> <div class="contenu"></div> </div> <div class="piedpage"></div> </div>
Dans le bloc .entete
, insérez un paragraphe contenant le nom du site.
<div class="entete"> <p>Titre du site</p> </div>
Dans le bloc .entete
, ajoutez un lien hypertexte sur le nom du site pointant vers la page courante.
<div class="entete"> <p><a href="index.html">Titre du site</a></p> </div>
Dans le bloc .menu
, ajoutez une liste non-ordonnée contenant trois liens hypertextes permettant de naviguer entre les différentes pages d’un futur site.
Dans la mesure où les pages vers lesquelles devraient pointer les éléments du menu n’existent pas, vous pouvez mettre le symbole #
comme contenu de l’attribut href
pour vos liens. Cela permettra d’avoir des liens complets mais qui ne renverront pas vers une erreur 404 si vous cliquez dessus par mégarde.
<div class="menu"> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div>
Dans le bloc .contenu
, ajoutez :
- Un titre de niveau 1 ;
- Plusieurs paragraphes un peu long (utilisez du Lorem Ipsum).
Dans le bloc .piedpage
, ajoutez une ligne de texte.
Réglages de l’interface web
Ajoutez une largeur à la colonne .menu
et à la colonne .contenu
.

Vous venez de définir une largeur pour les deux colonnes. Selon le modèle de boîte, si vous ajoutez des marges internes et/ou des bordures, la largeur réelle de vos colonnes va changer, dans le modèle de boîte pas défaut, la taille réelle = largeur + marges internes + épaisseur de la bordure.
Utilisez la propriété box-sizing
, afin de modifier le comportement du modèle de boîte pour que la largeur définie avec width
inclue les bordures et les marges internes.
Pour faire en sorte que l’élément .contenu
s’adapte et occupe toute la place disponible, il faut pouvoir le régler afin qu’il occupe : toute la largeur moins la largeur du menu.
Pour cela, est possible de définir la largeur en utilisant la fonction calc()
. Appliquez donc cette méthode en vous inspirant de l’exemple d’utilisation de calc()
ci-dessous :
.exemple { width: calc(80% - 300px) ; }
Manipulez la largeur de la fenêtre du navigateur. Vous voyez maintenant que la largeur de .contenu
va s’adapter en fonction de la largeur de la fenêtre du navigateur !
Sur écran large, nous avons toujours une large place disponible sur la droite du .contenu
. Vous allez maintenant essayer de centrer .contenu
dans l’espace disponible. Pour cela, il faut suivre les 6 questions suivantes.
Supprimez la largeur maximale sur .contenu
.
Dans le code html, insérez à l’intérieur de .contenu
, un nouvel élément <div>
qui va englober la totalité des éléments de .contenu
.
Ajoutez la classe .contenu-interieur
au nouvel élément <div>
que vous venez d’ajouter.
Ajoutez une couleur d’arrière-plan à.contenu-interieur
.
Dimensionnez la largeur de .contenu-interieur
en donnant une largeur maximale ainsi qu’une largeur minimale (pour que le contenu ne puisse pas être moins large que le menu).
Enfin, pour centrer .contenu-interieur
, ajoutez-lui des marges automatiques à gauche et à droite.

Mise en forme de la page
L’interface est en place, il s’agit donc maintenant de finir la mise en page pour l’adapter à vos goûts.
Définissez une police par défaut pour votre page. Vous pouvez pour cela utiliser Google Font.
Modifiez les couleurs de la page en définissant un palette de couleurs avec un outil tel que Paletton.com ou Coolors.co.
Ajustez la taille des caractères des différents éléments.
Sauf mention contraire*, l'article Création d’une interface fluide 2 [CSS26] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.