CSS : Positionnement et mise en page

Aller plus loin avec les colonnes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'aide de quelques propriétés, vous pouvez gérer la manière dons les divers éléments vont s'enchaîner au sein des colonnes. Explorez la propriété break-* pour voir comment elle peut améliorer la lisibilité.
03:10

Transcription

Lorsqu'on a des colonnes mises en place comme ça et si on redimensionne l'élément, donc si on est dans une interface un peu liquide, on voit que le navigateur va essayer d'équilibrer chacune des colonnes en répartissant judicieusement les lignes de chacun de ces paragraphes au sein de ces colonnes. Alors, on a des propriétés, qui nous permettent d'empêcher certains passages d'une colonne à l'autre. Par exemple ici, si je regarde dans mon texte, j'ai une première classe qui s'appelle dernierdelacol, alors pour pouvoir les distinguer simplement leurs couleurs ont été atténuées. Donc ici je vois que celui-là c'est le dernierdelacol et vous voyez que ce dernierdelacol ici, si je réduis la fenêtre, il peut éventuellement basculer des chapitres après lui, vous voyez et ici Nostrum vient de passer juste derrière lui. Donc ici on va pouvoir dire, dernierdelacol break-after et on va dire, je ne veux pas des colonnes par exemple, je veux éviter les colonnes ici, CTRL+S et si j'actualise on s'aperçoit que la colonne vient d'être chassée juste après la colonne a été poussée, et donc on refuse cet élément-là et ici le premierdelacol, vous voyez ici celui-là le dernier élément, on va pouvoir lui dire break-before et on va pareil éviter les colonnes ici, tout simplement. CTRL+S, alors si on rajoute un petit n, je pense que la valeur sera mieux appréciée, et ici tout a été redistribué pour que lui, on évite, ça sera forcément un premier de la colonne et lui sera forcément le dernier de la colonne et donc vous pouvez redistribuer comme vous voulez on va respecter toujours cet élément. Par contre vous voyez qu' ici qu'à cet endroit-là, cet élément-là, il poursuit sur le prochain ici et on pourrait avoir... lui non parce que lui c'est le premier il ne pourra jamais poursuivre et lui ne pourra jamais passer devant parce que lui c'est le dernier mais celui-là vient de basculer sur la suite. Eh bien vous pouvez aller dans les p par exemple ici et lui dire qu'on pourra faire un break-inside et on va lui dire d'éviter, on va faire un avoid cette fois-ci, on va lui dire on évite d'avoir un break-inside. Donc ici vous voyez bien que dès que je vais actualiser je vais pousser dans ce qui sera les colonnes les moins hautes donc le navigateur quand même arrive à avoir un algorithme qui va lui permettre de rééquilibrer tout ça et de lui dire, toi tu peux pas rester coupé en 2, tu vas passer dans l'autre colonne puisque lui te l'autorise parce que c'est pas un break-before, c'est un break-after. Voilà donc des petites propriétés comme ça qui vont être intéressantes pour nous permettre d'équilibrer les contenus, de rendre certaines block quotations ou des annotations, des sortes d'informations dans la marge, beaucoup plus lisibles. Par contre, sachez que toutes les colonnes ne peuvent faire toujours que la même largeur, on ne va pas pouvoir avoir une colonne d'une certaine largeur, et d'autres colonnes d'une autre largeur. Alors, regardez ici depuis la propriété break-after break-before, toutes les possibilités que vous pouvez avoir comme information en utilisant la redistribution dans chacune des colonnes.

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 !