CSS : Positionnement et mise en page

Exploiter les standards

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez le même exemple HTML que celui employé avec les frameworks. Découvrez comment mettre en place la mise en page des principaux blocs et de la barre de navigation de manière standard.
05:59

Transcription

Pour l’instant je vous propose de partir sur le même exemple basique qu’on a utilisé de mise en page avec le même code html, la même structure, et cette fois-ci d’utiliser du standard web directement dans les CSS. Alors, pour cela on va utiliser un display: grid; tout simplement qui est la nouvelle possibilité de pouvoir utiliser cette forme de mode en grille intégrée maintenant par les navigateurs dans la mesure où vous avez activé le drapeau pour les expérimentations non encore validées. Donc, ici une fois que le mode est choisi pour être un affichage en mode grille pour le conteneur, c’est-à-dire pour l’intégralité de cet élément ici qui contient l’ensemble du contenu ici, on va définir deux éléments, le grid-template-columns au pluriel qui va nous permettre de définir les colonnes, donc on pourrait très bien dire mettons 100px, 1em 200cm. Vous pourrez définir comme ça des colonnes, des largeurs et autant de colonnes qu’on a besoin. Ce qu’il faut savoir aussi, c’est que le mode grille utilise des mode grilles à colonnes par exemple explicite. C’est pareil pour les rangées, explicites donc définies et implicites donc qui vont être créées à la volée. Donc, on pourrait très bien placer maintenant hors de la grille en quatrième position quelque chose. Cela ne complaindrait pas cela ne ferait pas des soucis, cela pourrait fonctionner. Alors maintenant les colonnes peuvent être tout à fait identiques et dans ce sens-là moi, j'aimerais utiliser 12 colonnes qui fassent un certain nombre de pixels. Donc, là il faudrait calculer combien fait 960 divisé par 12, donc 80 mais il faudrait que je le fasse etc. Donc en fait on peut utiliser une nouvelle fonction, ça y est, les CSS ont compris. On a besoin de fonctions, et on va pouvoir dire : tu me le répètes douze fois. Tu me répète douze fois quoi ? 80 pixels. Le problème c’est que si après je ne veux plus passer à 960 pixels mais en 1024, je vais être embêté. Donc je vais utiliser une nouvelle unité de mesure qui est apparue, qui est le fr, qui est le mode fraction de l'espace disponible dans le conteneur dans lequel je suis, donc ce n’est pas fixe cela peut s'adapter. Et c’est contextuel et c’est très bien. Donc ici si je dis : Répète moi 12 fois 1 fr je vais pouvoir créer une grille qui fera 12 colonnes par rapport à cet espace de 960. Maintenant je vais faire exactement la même chose mais cette-fois ci pour les template-rows au pluriel qui va faire pour les rangées et donc les templates rows, ce que je vais faire, je vais leur dire de faire en repeat tout simplement 3 fois automatique, tu t’adaptes au contenu à la hauteur, tu m’en fais 3 explicites, définies, mais qui feront 3 de hauteur. Donc ici maintenant dans le header, je vais pouvoir lui dire, je vais utiliser la propriété grid-column, alors cette fois-ci c’est une colonne au singulier, ce n’est plus au pluriel qui va définir, je vais lui dire, tu feras une colonne, Donc si je fais une colonne, tout mon contenu va s’adresser dans cette colonne. Je vais rajouter un slash et je lui dis : tu t’étends sur 12. Donc il va pouvoir partir de la première colonne jusqu’à la douzième colonne. Et au niveau de la hauteur grid-row, je vais lui dire, tu te mets sur la première de ces colonnes. Voilà, on va faire pareil au niveau du footer. Le footer c’est la même chose, donc je vais copier ça directement, je vais le rajouter au footer, sauf que le footer ne sera pas sur la première, il sera sur la dernière donc sur la troisième. Puisque la deuxième va être automatique, le footer se placera sur cette troisième row qui va suivre verticalement là où elle doit se placer. Alors au niveau du aside c’est pareil. Je vais utiliser la même gymnastique. Je vais partir du 1. Seulement cette fois-ci je vais lui dire tu t’étends jusqu’à la colonne numéro 4. Et pour la row ici, tu te mettras sur la row numéro 2. Et pour le main je vais lui dire : tu partiras de la colonne numéro 5 et tu t’étendras sur 8 colonnes, pardon ici ce n’est pas sur la numéro 4, c’est tu t’étendras de 4 colonnes, et ici tu partiras de la 5 et tu t’étendras de 8 colonnes. Donc ici, on va la placer sur la 2, donc faites attention si vous vous trompez lui il essaiera de les positionner sur la colonne 1 etc. Donc ici, j’enregistre, je bascule dans mon navigateur, Donc, on voit bien qu’ici on avait la page brut de décoffrage, si j’actualise vous voyez qu’ici on est bien sur 12, qu’ici on est sur 4 et le footer est sur 3, donc c’est bien positionné, sauf que mon menu lui il se retrouve en vertical. Donc on va retourner ici à ce niveau-là et on va dire que le ul maintenant c’est ce mode d’affichage du ul, c’est un display-grid tout simplement. Donc on imbrique une grille dans une grille, pas de soucis jusque-là. Mais ce qu’on va faire, c'est lui dire qu’on met un grid-column template ici un grid-template-columns au pluriel. Ici on va lui dire que tu me fais un repeat de 6 fois 1 fr. Pourquoi 6 ? Parce que j’ai 6 boutons tout simplement. Et on pourrait le faire simplement comme ça. Cela fonctionne très bien. Donc ici je vais venir dans le navigateur. J'actualise et vous voyez qu’il m’a placé mes éléments dans chacune des colonnes qui ont été divisées par 6 c’est très bien. Mais ce que j’aime bien quand même c’est rajouter au niveau des li ici une petite information qui n’est pas des moindres et qui va nous permettre de dire ici tu vas faire un grid-auto-flow. Tu vas adapter le flux de remplissage que tu vas faire sur les colonnes. On a plusieurs modèles qui pourraient être denses, ou row pour s’adapter etc. Là ici, on va lui dire : tu remplis chaque fois une colonne et point barre. Si tu as besoin de colonnes supplémentaires, ne t’inquiète pas tu me les fabriques, il n'y a pas de soucis. Donc dans ce sens-là on est beaucoup plus tranquille pour la répartition de ces menus, surtout si on n’a plus le même nombre de menus que le nombre de colonnes qui a été fait. Ici, si je fais un contrôle S et que je passe dans le navigateur et que j’actualise cela ne changera rien, mais cela nous permet de voir qu'on a travaillé ici, en standard et surtout que dans notre html on a aucune librairie qui est liée aucun framework emmené, on voit bien que de manière standard, les navigateurs vont prendre en compte ce genre d’utilisation, pour la mise en place de nos pages.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !