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 :

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.

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