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 :

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.

.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.

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

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

.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 ».

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 :

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…

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.

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.

Correction de l’exercice

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

Sauf mention contraire*, l'article Flexbox : Mise en forme d’une page [CSS12] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.