Positionnement flottant et fixe : Pas à pas 01 CSS04

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.

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

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

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 ?

Afficher la solution

Solution

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

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