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 :
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
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; }