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.
width, margin
.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.
display
.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 ».
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 :
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.
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.
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.
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
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.