Positionnement flottant et fixe : Pas à pas 01 CSS04

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.

Aperçu des blocs initiaux

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

Solution CSS :
.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.

Solution CSS :
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.
Solution CSS :
.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.

Solution CSS :
.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.

Solution CSS :
.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 ?

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.

Solution CSS :
.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.

Solution CSS :
.colonne_menu{
    background-color: #fcf794;
    float: right;
    width: 200px;
}
.colonne_contenu {
    background-color: #b0fcd6;
    margin-right: 200px;
    padding: 1rem;
}
S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires