Julien Crego
Flexbox : Mise en forme d’une page 2 CSS13
Cet exercice consiste a définir une maquette de page pas à pas en utilisant un positionnement flexible pour disposer les éléments HTML.
Consignes de l’exercice
Préparation de l’exercice
Créez un dossier racine qui contiendra tous les fichiers de l’exercice.
Dans le dossier racine créer un nouveau fichier HTML avec toute la structure de base d’une page web.
Solution :
Voici la structure de base pour une page HTML.
HTML
<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> </body></html>Dans le dossier racine, créez un nouveau fichier CSS vierge avec le nom style.css.
Intégrez le fichier CSS dans la page HTML.
Solution HTML :
Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.
HTML
<link rel="stylesheet" type="text/css" href="style.css">Gardez les deux fichiers HTML et CSS ouverts dans votre logiciel d’édition et ouvrez la page HTML dans votre navigateur pour consulter les modifications
Disposition des différentes zones d’affichage
Pour chacun des éléments HTML que vous allez ajouter, pensez à leur ajouter des couleurs d’arrière-plan différentes, afin de pouvoir les distinguer visuellement et surtout voir si vos positionnements sont corrects.
Au début de chaque question est indiqué le fichier sur lequel vous devez travailler : HTML ou CSS.
HTML : Insérer un élément <div></div> avec la classe page qui servira de conteneur à la totalité de la page HTML.
Solution HTML :
HTML
<div class="page"></div>CSS : En utilisant le sélecteur CSS permettant de désigner l’élément conteneur page :
- Attribuez une largeur de 960 pixels à l’élément.
- Centrez le conteneur dans la fenêtre du navigateur en lui appliquant des marges automatiques.
- Ajoutez une couleur d’arrière-plan (pour le rendre visible).
Propriétés CSS :
Cliquez sur une propriété pour en savoir plus :
width, margin, background-color
Solution HTML :
CSS
.page { width: 960px; margin: 0 auto; background-color: red;}HTML : Créez les conteneurs correspondants à l’illustration ci-dessous avec une classe chacun pour pouvoir les manipuler avec CSS.
Solution HTML :
Voici une solution utilisant uniquement des éléments <div>.
HTML
<div class="page"> <div class="header">Header</div> <div class="content">Section</div> <div class="aside_left">Aside</div> <div class="aside_right">Aside</div> <div class="footer">Footer</div></div>Voici une deuxième solution utilisant des éléments HTML sémantiques.
HTML
<div class="page"> <header class="header">Header</header> <section class="content">Section</section> <aside class="aside_left">Aside</aside> <aside class="aside_right">Aside</aside> <footer class="footer">Footer</footer></div>CSS : Colorez les conteneurs pour obtenir un résultat similaire à l’illustration ci-dessous.
Propriétés CSS :
Cliquez sur la propriété pour en savoir plus :
background-color
Solution CSS :
CSS
.header { background-color: yellowgreen;}.nav { background-color: papayawhip;}.content { background-color: darkturquoise; }.aside_left{ background-color: gold;}.aside_right{ background-color: salmon;}.footer{ background-color: lightsteelblue;}CSS : Transformez l’élément utilisant la classe page en conteneur flexible (flexbox) afin de pouvoir y disposer par la suite les différentes zones de contenu.
Propriétés CSS :
Cliquez sur la propriété pour en savoir plus :
display
Solution CSS :
CSS
.page { width: 960px; margin: 0 auto; background-color: red; display: flex;}CSS : Dimensionnez les flex-items (header, section, aside,…) pour obtenir un résultat similaire à l’illustration ci-dessous. Vous allez devoir gérer le retour à la ligne dans le conteneur.
Propriétés CSS :
Cliquez sur une propriété pour en savoir plus :
width, height, min-height, flex-wrap
CSS : Sans modifier le code HTML, réordonnez les éléments pour obtenir un résultat similaire à l’illustration ci-dessous.
Propriétés CSS :
Cliquez sur la propriété pour en savoir plus :
order
HTML : Insérez un menu de navigation dans un bloc <nav> à partir d’une liste à puce avec quatre liens hypertextes (un par ligne).
Solution HTML :
HTML
<nav class="main-nav"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul></nav>CSS : Positionnez le conteneur <nav> pour obtenir un résultat similaire à l’illustration ci-dessous.
CSS : Transformez la liste à puce du menu en conteneur flexible.
CSS : Ajustez la mise en forme du conteneur flexible (de la liste à puce) pour obtenir un résultat similaire à l’illustration ci-dessous. Il est recommandé de commencer par ajouter une bordure aux lignes de la liste à puce pour visualiser ce que vous faites.
Propriétés CSS :
Cliquez sur une propriété pour en savoir plus :
padding, list-style, justify-content
HTML & CSS : Transformez le pied de page pour obtenir un résultat similaire à l’illustration ci-dessous.
Personnalisation de la page
HTML & CSS : Personnalisez la page à votre goût en vous inspirant des illustrations ci-dessous.
Sauf mention contraire*, l’article Flexbox : Mise en forme d’une page 2 CSS13 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.
Commentaires