CSS : Positionnement et mise en page

Aller plus loin avec le Grid Layout

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
En vous appuyant sur le Grid Layout, rendez les contenus réactifs. Puis, explorez une innovation très intéressante qui s'appuie sur la propriété grid-template-areas. Le positionnement devient alors un véritable jeu d'enfants !
06:10

Transcription

Plusieurs points. Donc c'est très bien, on a vu dans l’exemple précédent qu'on pouvait mettre en place une page mais qui n’est pas du tout responsive, mais qui quand même s’appuie sur les standards en mode grille. Ce que je vous propose maintenant c’est de placer sur exactement la même page, cette-fois-ci l’utilisation d’un mode grille responsive. Donc on va garder un point de départ avec une rupture à 480 pixels exprimée ici en proportionnel, avec ici 481 pixels, la deuxième partie écran large, écran petit. Ce que je vous propose c’est que sur cette page de départ on ait exactement le même rendu c’est-à-dire que le side bar possède ici l’intégralité de la largeur comme le main et le footer, et que les menus eux se mettent sur deux colonnes de large c’est-à-dire 3 menus ici, 3 menus ici. Donc après libre cours à votre esprit créatif. Donc ici, que va-t-on faire ? On va utiliser quelques chose de nouveau, quelque chose de plus qui est apporté par le mode grille des standards. Parce que si les standards disaient simplement : tu vas te mettre sur la première colonne et la troisième rangée c’est très bien mais ça n’apportait pas de souplesse supplémentaire au framework et il fallait que quand même les standards aillent plus loin que cela. Alors pour revenir ici à notre départ on va utiliser ce qu’on appelle des template area qui vont définir des zones. Et ça, c’est fabuleux, alors on va commencer par l’écran le plus large puisque c’est lui qui nous parle le mieux pour l'instant. Alors on va faire un autre grid template comme on l’avait fait tout à l’heure, par contre au niveau des colonnes on pourrait encore une fois définir comme on l’a fait un repeat, ça serait fabuleux. Mais ce que je vous propose ici c’est de se dire : on n'a plus la limitation volontairement des 960 pixels. On utilise le plein écran, on va utiliser une autre unité qui est le viewer-width, et ici on va mettre au moins cette unité après la décimale et dire qu’on va utiliser le viewer-width. Donc on va utiliser 33,33% pour l’instant de la largeur disponible de l'écran et on va la multiplier par 3 parce qu’on va faire 3 colonnes. Au niveau maintenant des row, on ne va pas redéfinir des row, on va définir ce qu’on appelle un grid-template-areas et on va définir des zones ici basées sur 3 colonnes. Mais encore une fois on pourrait totalement définir des zones implicites par la suite, ce n’est pas parce qu’on va définir une matrice qu’on va devoir uniquement utiliser cette matrice, et c'est ce qui est complètement fabuleux. Ici je vais appeler ça header. J'aurais pu l'appeler tartempion filibert, poire, scoubidou, peu importe, et je vais dire que cette zone je vais l’appeler header cette zone-là Cette zone-là, je vais mettre le header. Ici, je vais remettre le header. Ici, je vais mettre des guillemets pour parler d’une seule ligne, je vais faire en retour et je vais revoir comment redéfinir cette zone-là. Ici je vais mettre ce qu’on appelle le aside, ici je vais mettre ce qu’on appelle le main, et ici je vais remettre ce qu’on appelle le main. Je vais faire ma colonne et ici je vais mettre le footer, footer, footer. Ne vous inquiétez pas, on explorera de manière différente par la suite. Ici on cale un exemple qui est éxistant, donc c’est beaucoup plus simple de la caler de cette manière-là. Donc ici puisque j’ai défini mes zones, je vais aller attribuer ces zones directement ici, par ce qu’on appelle un grid-area, et je vais dire dans le grid-area, le header, tu me le mets partout où ça s’appelle header, par contre je ne mets pas les guillemets cette fois-ci. Alors je vais copier cette partie-là pour aller plus vite et je vais lui dire que le aside, tu me le places partout où tu le vois le aside. Le main tu me le places partout où tu vois le main pas besoin de vous le répéter, vous avez capté la souplesse et la simplicité avec laquelle maintenant on va pouvoir placer nos éléments dans les zones et surtout quand on va être en responsive. Voilà ce que je vous propose c’est déjà de voir ce que cela donne en écran large. Donc, je passe dans l’exemple qui est en cours et qui n’a pas été configuré, et vous voyez que maintenant ça s’est bien mis comme ça. Ça fonctionne bien sur cette largeur-là. Ce que je vais faire maintenant c’est positionner mon header et mon nav directement pour les utiliser et les exploiter. Alors je reviens dans la partie du code, ici. Ici, ce que je vais faire, c’est me dire que je vais récupérer en gros cette grille-là, cela me permettra de gagner un tantinet de temps, et je vais dire que ici, cette fois-ci, je vais utiliser la pleine largeur. Donc, j’aurais pu utiliser 100%, 100 viewer ici. Par contre en termes de templates area, ce que je vais faire c’est dire tout simplement ici tu me mets le header, le main, tu me le mets ici, le footer, tu me le places là. Tout simplement, je n’ai pas besoin de changer plus que cela. Ça suffit, ça comprend comment je veux réorganiser mes choses. Et si bien entendu je mettais le aside sous le main, bien entendu qu’on positionnerait les choses différemment. Donc ici je vais mettre le aside sous le main, ici et j’enregistre tout simplement. Vous avez vu avec quelle souplesse on va pouvoir positionner les éléments. Maintenant au niveau du ul on va utiliser la même chose que ce qu’on avait utilisé tout à l’heure, c’est-à-dire que je vais dire qu’en temps normal tu me le mets en mode grille tu me les mets en repeat. Et dans cette partie-là, ce qu’on va faire c’est au lieu d’avoir 6 colonnes qui vont être dans ce sens-là, je pourrais dire un repeat 2 fr. Moi ce que j’aime bien, c’est faire dans des cas comme ça aussi, puisque c'est pas très verbeux à écrire, c’est utiliser 50 50 v viewer. Alors, pourquoi ? Parce-que si d’un coup on veut passer à 60 40 c’est beaucoup plus facile. C’est comme ici je pourrais passer en 40 30 30 par exemple. Donc vous voyez que c’est beaucoup plus facile à modifier de cette manière-là. J’enregistre, je bascule dans le navigateur, j’actualise ma page, et bingo le menu s’est bien mis en place. Si je redimensionne ma page, ici j’arrive à un certain niveau, alors c’est vrai que le point de rupture devrait être beaucoup plus proche que 480. Mais vous avez compris maintenant comment on va pouvoir gérer ces éléments-là. Donc là, il me faudrait mesurer à partir de quel moment ici on commence à rentrer en collision et commencer à proposer un point de rupture pour pouvoir avoir cet élément-là. Voilà donc vous avez vu avec quelle souplesse on va pouvoir faire basculer le aside en-dessous du titre, du footer, etc. Vraiment, les layout grid qui arrivent avec le W3C non seulement sont en standard mais en plus apportent une énorme souplesse pour le positionnement des contenus 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 !