CSS : Positionnement et mise en page

Travailler avec les colonnes

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce aux propriétés standards de colonnes, vous pouvez reproduire facilement la mise en page de vos magazines préférés. Faites attention à préserver la lisibilité.
04:59

Transcription

Il arrive parfois que nous ayons besoin de présenter le contenu d'un bloc, comme ça, sous forme de colonne, un peu comme on le ferait dans des magazines. Depuis CSS3, nous avons accès de manière un peu plus répandue à l'utilisation des colonnes. Alors faites bien attention, ici je vais pousser une caricature on va aller jusqu'à 4 colonnes mais pensez à préserver la lisibilité de ces contenus en ligne sur un écran on n'est pas sur un magazine, donc on va pas jouer forcement de l'ascenseur horizontal ou vertical pour aller lire tous ces contenus. Donc pensez lorsque vous exploitez les colonnes, de le faire de manière parcimonieuse et surtout adaptez les adhoc à la situation. Ici, on a une section qui contient une série de contenus sous forme de titre et de paragraphe pour l'instant ici et ce que l'on va essayer de présenter c'est ces éléments-là sur des colonnes. Pour utiliser des colonnes ici, il suffit d'utiliser un column-count tout simplement et de définir le nombre de colonnes que l'on veut utiliser et automatiquement panner sur 2 colonnes. Parfait ! On va pouvoir définir des colonnes width. Alors je vais volontairement aller sur 4 pour faciliter les calculs d'une part et puis pousser un peu dans les extrêmes. Ici sur 4 colonnes. Voilà si j'actualise, je suis à 4 colonnes c'est très bien et vous avez vu j'ai une largeur ici de 600, le problème c'est que ça fait 600 tout compris. Alors généralement, ce qu'on va essayer de faire dès le départ c'est de faire un box-sizing ce qui est même d'ailleurs recommandé dans l'ensemble des développements c'est de faire un box-sizing et de faire un border-box tout simplement CTRL+S ce qui fait que maintenant, j'ai 600 pixels tout compris, jusqu'à la bordure. Si je reviens à mon column-width ici, ce column-width, je ferais donc si j'ai 600 moins les fameux 50 et 50 de chaque côté qui correspondent en fait au padding ça me fait 500, 500, si je le divise par 4 ça me fait 125. Si je passe à 125 pixels ici et que j'actualise, on se retrouve plus qu'avec 3 colonnes, il y en a une qui a dégagé ce qui n'est pas normal et il me faut descendre comme ça presque jusqu'à... si je fais 110 regardez, 110 pixels, CTRL+S Ah ça y est ! J'ai eu. Si je passe à 115 CTRL+S J'actualise, pouf, je repasse en 3. En fait, le problème vient, qu'il y a aussi des gap, on a aussi une sorte d'inter-gouttière entre les 2 une petite passerelle qu'il faut prendre en compte pour les largeurs. Alors vous pouvez utiliser du pixel, vous le voyez, mais il est préférable d'utiliser du pourcentage parce que là, je me pose pas de question. Je dis que je veux le couper en 4 et chacune fait 25% et BAM, ça fait 25% donc là-dessus c'est tout compris, marge compris. Donc ici, on va pouvoir venir définir de manière autonome et indépendante le fait de dire que mon column-gap lui, va faire, par exemple 30 pixels, et si je passe sur 30 pixels, regardez quand j'actualise on a bien 30 pixels. Alors là c'est complètement illisible mais c'est pas grave vous avez compris le principe ça nous permet de gérer cette largeur interne entre chacune des colonnes. On va pouvoir aussi ajouter ce qu'on appelle un column-rule qui possède 3 propriétés, color, width, et style qui va nous permettre de définir un peu comme si on définissait une bordure mais cette fois-ci c'est une bordure qui est entre les colonnes et non pas sur les extérieurs, etc. Donc, on va faire ici, un pixel, comme si on faisait une déclaration courte de border, on va pouvoir dire un dotted ici et on va utiliser un gris moyen en 3b par exemple 3b et 3b. CTRL+S, on actualise et on a bien nos bordures qui interviennent en séparations, petit détail c'est que le titre lui il devient étriqué, ça serait intéressant de pouvoir l'étendre sur plusieurs colonnes. Alors là, on n'a pas trop le choix. C'est entre par défaut une ou toute, ou alors inherit ou initial et ici ce qu'on va faire c'est un column-span:all, On pourrait avoir besoin de l'étendre que sur 2 colonnes ça pourrait être intéressant pour des images, pour des éléments comme ça, mais voilà ici pour l'instant c'est qu'un ou all dans les recommandations donc allez-y de vos petits mails, envoyez au W3C pour demander au groupe de travail d'intégrer un aspect numéraire sur le nombre d'étendues dans la colonne. Voilà ! Donc ça c'est placé, c'est parfait ! J'ai prononcé le mot d'image, quand serait-il si on intégrait une image à l'intérieur eh bien ici on va venir par exemple entre le premier paragraphe ici je vais mettre une image on va coller cette image ici. Je vais actualiser ma page et on voit que l'image arrive. Alors pour info, c'est une image qui fait 200 pixels, comprenez les 150 pixels maintenant, et qui donc dépasse forcément dans la colonne. Alors pour cela, il suffit de venir dans le style, de faire un img, ça aidera ici et placer un width à 100% CTRL+S, on actualise et l'image s'est automatiquement placée. Ce qu'il y a d'intéressant, c'est que si je la déplace dans le flux ici et que je la place après ce chapitre ici, CTRL+S l'image va se déplacer dans le flux, va suivre les columns, donc c'est parfait de ce côté-là on n'a pas à gérer le flux d'insertion, la propriété colonne fera le reste.

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 !