Télécharger le PDF du cours
Je vous propose donc de créer à nouveau une page complète qui va suivre deux dispositions différentes selon qu’elle soit affichée sur petits écrans (sur mobile) ou sur un écran de bureau.
Comme nous en avons désormais l’habitude, nous allons commencer par créer la version mobile de la page qui sera la version standard puis utiliserons les Media Queries pour créer une disposition différente pour l’affichage sur bureau.
La page va contenir les éléments suivants :
- 1 en-tête ou
headerqui va comprendre un menu ; - 4 blocs de type
aside; - 1 bloc de contenu de type
articlequi contiendra lui-même une structure complète ; - 1pied de page ou
footer.
Notre page suivra un design vertical avec une seule colonne pour l’affichage sur mobile et un design sur 3 colonnes pour l’affichage sur bureau.
Structure HTML de notre page
Comme d’habitude, commençons avec la structure HTML de notre page et notamment avec la structure minimale d’une page HTML et sans oublier la meta name="viewport".
Ensuite, nous allons ajouter un titre principal dans notre page et récupérer la structure du menu créé précédemment qui va très bien nous convenir. Nous allons placer le menu (mais pas le titre) dans un élément structurant header.
Sous le header, nous allons ajouter nos quatre éléments aside et notre élément article et allons placer tout cela dans un élément section.
Notre élément article va lui-même contenir un header, un menu de navigation interne, un corps qu’on va à nouveau placer dans un élément article et un footer.
Finalement, nous allons ajouter notre élément footer sous notre élément section.
Pour cette partie HTML, nous n’allons pas nous attarder sur le contenu comme on a pu le faire dans l’exercice de création d’un CV puisque ce n’est pas ce qui compte ici. Ce qui nous importe ici va être de créer des dispositions différentes. Libre à vous ensuite de placer le contenu que vous voulez dans les différents blocs HTML et de le mettre en forme !
Mise en forme CSS de notre page version mobile
Notre page en version mobile ne va posséder qu’une seule colonne. Les différents éléments vont donc être disposés selon un seul axe. Dans cette situation, on préfèrera utiliser le modèle des boites flexibles plutôt que les grilles.
Commençons déjà par notre traditionnel reset CSS et par ajouter quelques styles globaux.
Ensuite, nous allons reprendre le code de notre menu créé précédemment et allons faire quelques ajustements.
Tout d’abord, étant donné que notre élément nav est désormais dans un élément header, nous allons plutôt appliquer la position : sticky au header afin que le menu continue à rester collé lorsqu’on défile dans la page.
Nous allons également ici modifier les sélecteurs contenant nav en préférant l’écriture body > header > nav pour bien différencier les styles de notre menu de navigation principal et celui interne à notre élément article.
Voilà tout pour les ajustements relatifs au menu. Passons maintenant au corps de page qui va utiliser le modèle des boites flexibles.
Ici, nous allons déjà commencer par appliquer un display : flex et un flex-flow : column wrap à notre élément section class="conteneur" pour obtenir une orientation en colonne et transformer ses enfants directs en éléments flexibles.
Ensuite, nous allons simplement nous contenter d’ajouter une couleur de fond et une hauteur minimale à nos différents éléments aside.
On va maintenant mettre en forme notre élément article class="g3 sousconteneur". Nous allons déjà transformer cet élément en conteneur flexible et allons à nouveau choisir l’axe vertical comme axe principal.
On choisit d’afficher la navigation interne de l’article en ligne. Pour cela, on applique à nouveau un display : flex à notre élément de liste ul qui fait office de navigation et on choisit cette fois-ci l’axe horizontal comme axe principal. On espace régulièrement les éléments dans l’axe principal avec justify-content: space-around.
Finalement, on applique une mise en forme très basique à notre footer principal qui ne va nous servir ici qu’à afficher une notice de copyright.
Voilà tout pour la partie mobile. Passons maintenant à la version bureau sur trois colonnes de notre page.
Mise en forme CSS de notre page version bureau
Pour la version bureau de notre page, nous allons vouloir positionner et aligner les éléments sur les deux axes. Nous allons donc préférer l’utilisation des grilles au modèle des boites flexibles pour les blocs de la page.
Nous utiliserons cependant également le flexbox à l’intérieur de certains blocs pour créer des éléments de grille flexibles.
Commençons déjà par définir une règle @media screen and (min-width: 980px) et par remplacer les sélecteurs de notre menu principal nav comme précédemment par body > header > nav.
Ensuite, nous allons cette fois-ci appliquer un display : grid à notre élément section class="conteneur". On va donc ici créer une grille à trois colonnes avec une colonne centrale deux fois plus large que les colonnes gauche et droite. Notre grille va également posséder deux rangées qui devront faire à minima 300px de haut.
On va ensuite positionner nos différents éléments dans notre grille. On va ici vouloir que l’élément article occupe toute la colonne centrale et allons positionner les éléments aside de chaque côté.
Et voilà tout ! Notre élément article est toujours un conteneur flexible et les propriétés définies pour l’affichage mobile s’appliquent toujours ici et nous conviennent très bien pour l’affichage sur bureau. Pas besoin d’aller plus loin donc.
Nous avons donc créé une page totalement responsive et avec une structure d’affichage complexe en utilisant certaines des notions les plus récentes du HTML et du CSS !
See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.
See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.
See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.
