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