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.

Afficher les propriétés CSS

Propriétés CSS :

width, margin

Afficher la solution CSS

Solution CSS :

.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

Propriétés CSS :

display

Afficher la solution CSS

Solution CSS :

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

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

Afficher la solution CSS

Solution CSS :

.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

Solution :

Pour que le menu s’affiche bien avec une largeur de 200px, vous devez veillez à mettre une dimension à l’élément .contenu.

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

Propriétés CSS :

height ou min-height

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

Solution :

Par défaut le fait de transformer l’élément .pied en élément flexible n’a aucun effet sur son contenu… C’est normal, l’élément .pied ne contient aucun flex-item, il faut donc mettre le texte qu’il contient dans un élément html de votre choix, puis ajouter des marges automatiques sur le flex-item en question.

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.

Aperçu avec la marge interne
Afficher les propriétés CSS

Propriétés CSS :

padding, box-sizing

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.

Mise en forme du menu
Afficher un indice

Indice :

Il y a plusieurs choses auxquels vous devez faire attention pour mettre en forme le menu :

  • Les éléments <ul> ont des marges par défaut.
  • Il est possible de supprimer les puces sur les lignes d’une liste.
  • Les éléments <a> sont de type inline par défaut, il faut les convertir en éléments de type block si vous souhaitez les dimensionner.

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

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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