Cet exercice consiste a définir une maquette de page pas à pas en utilisant le positionnement flottant.
Avant de commencer l’exercice
La page HTML de base est structuré en 5 zones en utilisant des class
. Voici un schéma permettant de comprendre les différentes zones mises en place à l’intérieur de la partie. Des couleurs d’arrière-plan ont été ajoutées aux zones pour pouvoir en visualiser les limites.

Consignes de l’exercice
Préparation de l’exercice
Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.
Téléchargez les fichiers de base nécessaires pour commencer l’exercice :
Placez les deux fichiers téléchargés à la question précédente dans votre dossier racine local.
Ouvrez les deux fichiers .html et .css dans votre logiciel d’édition et la page .html dans votre navigateur.
Positionnement de l’en-tête
CSS : En utilisant le sélecteur .entete
, ajoutez une hauteur à l’en-tête de 100px : height
.entete{ background-color: #ff8eaf; height: 100px; }
CSS : Afin que l’en-tête soit collé au bord de la fenêtre du navigateur, supprimez les marges de l’élément body
en les réglant à 0.
body{ background-color: #a585fc; margin: 0px ; }
Positionnement du menu du site et du contenu
CSS : En utilisant le sélecteur .colonne_menu
:
- Positionnez le menu en flottement à gauche avec la propriété :
float
; - Définissez la largeur du bloc à 200px.

.colonne_menu{ background-color: #fcf794; float: left; width: 200px; }
CSS : En utilisant le sélecteur .colonne_contenu
, ajoutez une marge à gauche équivalente à la largeur du menu.

.colonne_contenu { background-color: #b0fcd6; margin-left: 200px; }
CSS : Ajoutez un peu de marge interne au contenu pour éviter que le texte ne soit collé au bords du bloc.

.colonne_contenu { background-color: #b0fcd6; margin-left: 200px; padding: 1rem; }
Gestion du pied de page
HTML : Supprimez les paragraphes et le titre de l’élément .colonne_contenu
pour ne garder que le premier titre. Observez ensuite le comportement du pied de page. Que constatez-vous ?
Si le contenu est plus court que le menu, le pied de page se retrouve à droite du menu plutôt qu’en dessous.

CSS : Réglez le problème identifié pour le pied de page.

.pieddepage{ background-color: #cccccc; clear: both; }
Inversion de la position du menu
CSS : Modifiez les réglages du menu et du contenu afin de positionner le menu à droite de la page.

.colonne_menu{ background-color: #fcf794; float: right; width: 200px; } .colonne_contenu { background-color: #b0fcd6; margin-right: 200px; padding: 1rem; }
Sauf mention contraire*, l'article Positionnement flottant et fixe : Pas à pas 01 [CSS04] 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.