Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Placer des exclusions sur la grille

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Utilisez la grille afin de gérer des zones d'exclusions. L'intérêt d'une telle approche est de permettre aux zones de suivre le redimensionnement de la fenêtre du navigateur.
04:17

Transcription

L’exclusion peut se porter sur une grille. Alors, vous vous rappelez on avait travaillé la grille, et la grille fonctionne bien sûr avec microsoft internet explorer, et j'ai utilisé volontiers le préfixage pour bien montrer que nous sommes dans un mode microsoft exclusivement pour cet aspect de l’exclusion ici. Donc ici on a un display ms-grid, qui va utiliser 3 colonnes fractionnées sur l’espace, donc on va avoir un damier de trois sur trois puisqu’en fait les rangées sont également de trois fractions, 1 1 1fr. Donc on a la section qui s’étend sur 3 colonnes et pareil pour la rangée qui s’étale de 1 sur 3. Et maintenant on va utiliser l’exclusion, l’exclusion ici c'est un simple div classe exclusion qui est placé ici en fin d’article. Il peut être plein, vide c’est à vous de voir, ça peut contenir une image, ça peut contenir un autre texte, ça peut contenir par exemple, une citation, un chapeau pour interloquer le lecteur sur une particularité de l’article. Vous y placez ce que vous voulez, pour l‘instant il est vide. Donc cette exclusion, on va pouvoir dire qu’elle se place par exemple, on va aller la positionner tout simplement comme on positionne l’article en disant ms grid-colonne par exemple. Toutes les propriétés de positionnement de la grille sont valables, ici on va lui dire que maintenant on a un wrap-flow, ms-wrap-flow, tout simplement. Puisque c’est, n’oublions pas, un bloc qu’on vient de positionner, tout à l’heure c’était une figure qu’on déplaçait, maintenant c’est un bloc tout simplement. Et là on va lui dire qu’il fait both, qu’il passe des deux côtés, encore une fois toutes le propriétés sont valables. Et là dès que vous allez actualiser vous voyez qu’automatiquement, on est en grid-column 2, on a un row de 1 forcément. Il est devenu en fait complètement exclusif à cet endroit-là. Vous pouvez rajouter un background color lightgrey par exemple. Histoire de pouvoir le visualiser ici, tout simplement, ctrl S, vous actualisez, comme ça on va pouvoir le voir, et vous voyez qu’il prend en compte l’article ici, donc c’est important de toujours donner une couleur pour être sûr de bien visualiser ce qu’on veut visualiser. Et là on va pouvoir mettre margin par exemple, voir si le ms-wrap-margin est pris en considération par le navigateur, et on va mettre par exemple, 15 pixels, et je vais mettre en em, pour rester dans une proportionnalité. Et là vous voyez que la marge est bien prise en compte, qu’elle est bien écartée autour du bloc. Et vous pouvez très bien dire de ce sens-là, voilà, là tu es parti sur une colonne de 2 mais on pourrait dire par exemple qu'on a un ms grid-row span, qui fait 3, ctrl S, vous actualisez et vous voyez qu’on a bien nos deux colonnes qui sont prises de part et d’autre, parce qu’on a mis ici both, mais on n’aurait mis que le start, par exemple ici, ctrl S, donc vous avez bien compris que cette colonne va être vide ici. Donc voilà, on peut utiliser le mode grille et s’appuyer dessus, pour pouvoir placer de l’exclusion dans nos articles. On peut se demander alors quel est l’intérêt, puisque cela fonctionnerait pareil puisqu’elle a un élément div, puisqu’ après tout c’est un élément div qui est positionné ici. En fait l’intérêt va être que, laissez-moi commenter cette partie-là, ctrl S, j’actualise, on va pouvoir redimensionner notre navigateur tout en préservant ce bloc ici, qui va se redimensionner, tout simplement sans qu’on ait besoin de le spécifier, parce que c’est en fait la grille qui définit la dimension de ce bloc et de cette exclusion. Donc le gros intérêt va être de pouvoir s’appuyer sur quelque chose de standard qui va permettre ce redimensionnement et ce repositionnement.

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 !