Flexbox : Mise en forme d'une page [CSS12]

Cet exercice consiste à définir une maquette de page pas à pas, à partir d’une page HTML fournie, en utilisant un positionnement flexible.

Avant de commencer l’exercice

La page HTML de base est structuré en 6 zones en utilisant des classes. 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 :

Fichiers de travail

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 afin de pouvoir modifier les fichiers et la page .html dans votre navigateur pour consulter les modifications.

Positionnement et dimensionnement des zones

Utilisez le sélecteur .page afin d’attribuer une largeur de 960 pixels à la page. Puis centrez le tout en ajoutant des marges automatiques.

Afficher les propriétés CSS Afficher la solution

Solution :

.page {
    background-color: red;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

Transformez la boite .centre en un élément flexible pour afficher son contenu sous la forme de colonnes.

Afficher les propriétés CSS Afficher la solution

Solution :

.centre {
    background-color: yellow ;
    display: flex;
}

Ajoutez une largeur de 200px à la colonne contenant le menu.

Afficher la solution

Solution :

.menu {
    background-color: green ;
    width: 200px;
}

Le menu a-t-il l’air de faire 200px de large en comparaison de la page qui fait 960px ? Réglez le “problème”.

Afficher la solution

Ajoutez une hauteur aux blocs utilisés pour l’en-tête et le pied de page pour avoir un résultat sensiblement identique à la capture ci-dessous :

Afficher les propriétés CSS

En utilisant les propriétés des éléments flexibles, centrez horizontalement ET verticalement le contenu du pied de page. Pour les besoins de cette question, vous devez adapter le code HTML…

Afficher la solution

Sans modifier le code HTML de la page, intervertissez l’ordre d’affichage des deux colonnes du centre (le contenu et le menu).

Simplification de la page HTML

Supprimez le bloc avec la classe centre de la page HTML (initialement les lignes 15 et 40) .

Adaptez votre code CSS pour avoir le même résultat que précédemment. Vous devez repenser votre interface pour avoir une flexbox permettant de positionner les 4 zones de votre page.

Ajoutez une marge interne à l’élément .contenu.

Afficher les propriétés CSS

Personnalisation de la page

Adaptez les CSS de votre page pour obtenir un résultat identique à l’image suivante en l’adaptant avec vos propres couleurs.

Effectuez la mise en forme du menu afin qu’il corresponde à l’image suivante en l’adaptant avec vos propres couleurs. Les boutons doivent changer de couleur au survol de la souris.

Afficher un indice

Correction de l’exercice

Vous trouverez la correction pour plusieurs étapes de l’exercice ci-dessous :

Correction