CSS : Positionnement et mise en page

Travailler sur un damier

Testez gratuitement nos 1325 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
En augmentant le nombre d'éléments, basculez rapidement sur une mise en page en damier. Avec flex, il devient très simple de présenter des galeries s'adaptant à l'écran.
09:12

Transcription

On peut facilement imaginer accroitre le nombre d’éléments et donc passer à la mise en place d’un damier par exemple pour présenter un certain nombre d’éléments. Alors ici on a une section qui contient des images, ces images sont elles-mêmes composées d’une série qui peut être des éléments de 200 pixels de large généralement sur 50, 100, 150 et 200 de haut, distribués de manière aléatoire, comme ça les uns à la suite des autres. Alors pour pouvoir mettre ça sous forme de damier, il va simplement falloir styler le container parent, donc ici en l’occurrence la section, et on va lui demander un mode d’affichage de type flex tout simplement. On pourrait demander du flex inline, flex tout court, c’est à vous de voir, ici en mettant du flex on voit que toutes les images se collent les unes à la suite des autres, n’oublions pas qu’elles font toutes une certaine hauteur, et qu’elles se sont toutes callées sur la hauteur, elles se sont toutes étirées, donc on va pouvoir casser le mode de distribution en rangée par défaut, et pouvoir les réorienter, par exemple sur du colonne, à ce moment-là, tous les éléments sont présentés les uns à la suite des autres, ce qu’on va pouvoir faire maintenant, c’est aller voir les flex-items, donc ce sont des images, si on leur donne une largeur width : 200 pixels de large ici, elles s’adaptent toutes, donc toutes vont être considérées comme des éléments de type bloc maintenant, puisque ce sont des flex-items, ici elles vont se mettre les une à la suite des autres, et ils vont continuer jusqu’au bas de l’écran. Ce qu’on va faire, c’est mettre directement une hauteur qui pourrait être de 100vh. 100vh c’est très bien puisque cela nous permet d’avoir une forme de dimension adaptée à la fenêtre, mais c’est toujours bon de dépasser un petit peu, pour ajuster l’éventuel engrenage qu’on pourrait avoir. Ici il ne se passe strictement rien, sauf qu’on a quand même une hauteur de section qui est à 120, donc si on place une bordure pour la délimiter ici, bien sûr la voir directement ici assemblée, vous voyez elle est bien placée à 120, mais les éléments ne sont pas limités à ces éléments-là. Donc ce qu’on va demander, c’est de faire un flex-wrap pour lui dire qu’il y aura la gestion du retour qui va être prise en compte, wrap, propriété wrap, et à ce moment-là, dès que les éléments arrivent à 120, ils sont renvoyés directement à l’étage pour pouvoir se réajuster. Donc vous voyez que c’est très simple de pouvoir rapidement mettre en place ces éléments. Alors ce que je vais faire, c’est rajouter une bordure haute image pour les distinguer, des fois il peut y en avoir plusieurs, voyez ici il y en a trois, les unes à la suite des autres, donc pour pouvoir les distinguer ici tout simplement, vous voyez, on a bien nos images qui sont placées. Le fait d’avoir mis 120 en partie basse, ça permet d’avoir un remplissage qui va se passer ici comme ça. C’est très rapidement mis en place. On pourrait pousser l’expérimentation en se disant que si on travaille avec un fichier json cette-fois ci avec une étiquette « Visserie », une image, vous avez toute la série d’images qui sont engrainées les unes à la suite des autres, comme on avait fait tout à l’heure avec les images monochrome ici, et en plus il y a un titre. Donc au niveau de l’html, il faudrait qu’on ait une div, une division au moins, une section au moins, peu importe la balise que vous allez utiliser en fonction des contenus que vous allez utiliser, mais avec un titre et une image. Donc de ce fait, plutôt que de les placer dans l’html en dur, on va créer une section id=« damier », on va faire appel à un javascript, ici ce javascript va se dire, au chargement de ma page, je vais envoyer une requête ajax, qui va pointer vers ce fichier json, quand json sera récupéré, on va placer les images, au moment de placer les images on va parser cet élément qu’on a récupéré, donc c’est-à-dire ce json ici, on va se dire qu’on va récupérer le damier ici, dans la partie id= « damier », et on va venir créer une boucle pour autant d’éléments qu’il y aura, donc on va créer un nœud, donc on a crée une fonction qui crée un nœud à l’éxtérieur, avec le type de nœud et la valeur qu’il doit contenir. Si la valeur n’est pas vide, à ce moment on crée un TextNode et on le remplace, sinon on renvoie directement le nœud, ce qui nous permet de créer un div avec une valeur neutre, un paragraphe avec une valeur qui va contenir cette valeur «Visserie», « Chaînes », « Planches », etc, et puis on pourra attribuer la valeur « src » de l’image à la valeur de l’image, qui correspond donc à cet élément-là, on rajoute en dur le chemin d’accès, parce que on va placer ces images toutes dans un dossier qui va s’appeler 1158_05 qui va contenir l’ensemble de toutes les images qu’on va venir afficher dans notre galerie, et puis on va pouvoir rajouter cette image et append à la balise div et la balise div à la section. Donc un truc très simple d’un point de vue json, si on regarde maintenant d’un point de vue du CSS, ce qu’il va falloir faire pour styler cet élément-là, s’affairer au container dans la section qu’on va d’entrée de jeu, transformer en flex, puisque c’est elle qui va contenir les éléments "fléxisés", on va faire exactement la même chose que tout à l’heure, on va faire un flex-wrap ici en se disant qu’on va remplir tous les éléments, mais on va les laisser en colonne, en rangée par défaut, donc dès qu’ils vont arriver sur le bord ici, ils vont se wraper tous seuls, donc on va faire un wrap direct, on ne va pas les disposer en colonne, et les disposer de manière en ligne, ce qu’on a besoin de placer, on a besoin de définir la hauteur, alors toutes nos images ici, si on vient les regarder, elles font toutes 200 pixels de haut, elles ont des largeurs distinctes, mais elles font toutes 200 pixels de haut, donc ce qu’on va faire, on va forcer le div à faire une hauteur de 200 pixels. Ensuite on peut s’occuper du texte, du paragraphe, donc déjà par lui donner une font-size de 1.4em, histoire de l’agrandir un peu, une hauteur de ligne qui sera indentique qui va nous le centrer verticalement. Une typo de type Arial ou Sans sérif que l’on pourrait avoir, une couleur d’arrière-plan plus la couleur anthracite qui va lui permettre de se dégager sur cette couleur d’arrière-plan. On pourrait le positionner de manière absolute, alors de suite attention, il va falloir le positionner par rapport à son container parent, qui est le div ici, de façon à le coller au fond, par exemple, en mettant bottom : 0px, si on lui donne une largeur de 100%, on va pouvoir faire un text-align : center. Donc ici on peut enregistrer cette partie-là et venir voir ce que ça donne, ça donne quelque chose de pas mal, parce que cela permet d’avoir cet alignement, et c’est vrai que les images ne font pas toutes la même largeur, donc de ce fait, automatiquement, cela s’égrène un peu. Alors on pourrait faire l’astuce de tout à l’heure, c’est-à-dire mettre une largeur un peu plus grande, donc cela ferait sortir tout le monde, ou ce qu’on peut faire aussi, c’est faire un justify-content, ici, et le mettre en position center. Histoire de le positionner au centre, ctrl S, et puis demander à nos éléments flex-grow, c’est-à-dire qu’on pourrait faire un flex tout court, flex : 1 ou dire directement, j’aimerais que tu agrandisses l’espace, qui reste là, donc ici cela donne ça. Il faut donc forcer les images puisqu’elles ne font pas toutes la même largeur, à s'aggrandir, mais cela risque, dès qu’on va le faire, de demander à certaines peut-être de dépasser ces éléments, alors on ne le voit pas sur les parties adjointes, puisque les suivantes écrasent les précédentes, mais on le voit bien sur la dernière qui, elle, s’est agrandie, mais qui automatiquement dépasse, donc de ce fait, n’hésitons pas à venir faire un overflow : hidden, pour être sûr de bien cacher la dernière image, ctrl S, si j’actualise, on voit bien que notre dernière image a été croppée. Donc très rapidement on peut faire un damier, l’étirer, jouer avec les contenus, histoire de faire une présentation qui tient la route. Par contre, ce qu’il y a d’intéressant, c’est que dès que je vais agrandir, que les images vont le permettre, vous voyez je peux avoir jusqu’à quatre images, trois images, et bien entendu, les images sont croppées au fur et à mesure. Donc ce qui me resterait à rajouter maintenant, ce serait un clic sur l’image pour avoir une image plein pot en présentation. Assez rapidement on va pouvoir utiliser les flex pour pouvoir présenter des damiers d’image sans avoir de soucis à prendre en compte sa redistribution en fonction de l’aspect responsive que l’on va vouloir apporter à notre contenu.

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 !