L'essentiel des CSS

Aborder la flottaison

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Quittez le mode d'affichage et explorez une notion connue telle que la flottaison. Cette option apporte bien des ouvertures, mais son utilisation nécessite beaucoup de prises en compte au niveau des éléments périphériques.
08:02

Transcription

Quittons le mode d'affichage utilisé par display et passons à un autre type, une autre possibilité pour pouvoir positionner les éléments. On va parler maintenant de la flottaison. La flottaison est quelque chose d'assez particulier utilisée pendant des années, et qui va être supplantée quelque part par les flexbox qu'on a vus juste avant. Mais qui pourront encore nous être utiles sur bien des positionnements. Regardez, ici, on a trois balises principales : la main, la aside et la footer qui sont placées toutes au même niveau. Á l'intérieur de la main, on a une série d'une vingtaine de div qui sont placées les unes sous les autres. Tous ces éléments étant de type bloc, on les a tous formatés avec une bordure rouge de un pixel et un background color histoire de pouvoir les distinguer. Ce qu'on va commencer à faire, c'est s'occuper uniquement des div ici, et leur dire qu'elles vont avoir une width, une largeur de 100 pixels, une hauteur de 100 pixels et un margin de 10 pixels, ici, juste histoire de pouvoir les distinguer de manière isolée. Donc, tous ces éléments-là sont de type bloc et donc forcément sont placés par le flux du navigateur les uns sous les autres bien qui'l y ait de la place à côté. C'est là où la flottaison va intervenir parce que si je demande maintenant au div de flotter, je vais rajouter au div un float-left ici. Dès que je suis en float-left, regardez ! J'actualise, tous les éléments se mettent à flotter les uns à côté des autres. C'est-à-dire que dès qu'il y a de la place à droite son côté gauche va venir s'appuyer sur le dernier côté de l'élément au-dessus. Par contre, le aside et le footer d'un coup sont partis en haut. On va voir ça juste après : regardez ! si je donne plus de places, plus de places vont passer sur le côté. Par contre, parfois vous avez vu, le aside se conduit de façon bizarre, Il englobe tout le monde, c'est une particularité aussi. Si je réduis, voyez ! le six passe dessous, puis là, le 5. Donc, la flottaison, c'est un peu comme on a vu tout à l'heure sur le flex, tout se positionne à côté, c'est un peu l'anarchie. Il respecte leur largeur, il respecte tout, Et le aside et le footer sont remontés. Pourquoi ? Tout simplement parce que dès l'instant où on fait flotter un élément, il n'est plus considéré comme faisant partie du flux. Donc, le aside qui arrive à la fin, lui se dit : « Il n'y a rien, je monte ! » Il n'y a plus rien devant moi, et il vient se caler au-dessus. Il est sorti du flux de ces éléments-là. Pour empêcher le aside de monter, il faut venir sur le aside donc on va coder au niveau du aside et on va lui dire clear. On va arrêter la flottaison. Là j'ai un clear left. Je vais lui dire : « Arrête de flotter si on te demande de flotter à gauche. » Et là quand j'actualise ma page, voyez, le clear, le aside, reste en-bas. Il se dit : « Attention, il faut que je ne suive pas cette flottaison. » et donc je vais rester ici, en bas. Parfait ! là on a placé notre première ligne de flottaison. Voyez déjà les complexités. Il faut pouvoir avoir un élément qui suit pour arrêter la flottaison, sinon le premier élément qui suit la flottaison va flotter comme les autres, et ainsi de suite. Ce qu'on va pouvoir demander c'est : " moi j'aimerais que le main ici, cet élément-là (je vais revenir à ce niveau et lire le main), ne fasse pas cent pour cent de hauteur, et que le main fasse un width de soixante pour cent '' par exemple. Alors, on va rester en pour cent. Là, dès l'instant que je fais ça regardez. je n'ai plus que soixante pour cent qui est utilisé par la largeur. Alors, avec ce problème de soixante pour cent, là, mon div ne rentre pas. Il faudrait que j'augmente un peu plus, pour que le soixante pour cent passe. Ça donne l'impression d'être à cinquante pour cent, et c'est la largeur de mon div le main doit venir un peu plus loin, mais du fait que le div ne puisse pas s'adapter, il n'y a pas assez de place, le quatre va dessous, il ne peut pas suivre. Pour pouvoir le voir, on pourrait demander au main d'avoir un outline de un pixel, solid.....................red. et à ce moment là, quand j'actualise vous voyez que je suis à soixante pour cent. C'est juste qu'il n'a pas la place de pouvoir venir devant. Maintenant, j'aimerais que mon aside puisse venir dans cette partie-là. Je vais venir sur le main et lui dire qu'il a un float-left. Rappelez-vous ! ce qui suit va flotter. Alors oui, je peux le faire flotter après les div. Non ! Les div ne sont pas au même niveau que le aside. Il faut que je le demande aux éléments qui sont placés au même niveau. Donc, si ici, je fais un float left ici, il ne se passe rien. Pourquoi ? Parce que le aside, ne va pas pouvoir flotter derrière cet élément à gauche. Ce que je vais faire, c'est dire à mon aside, qu'il a une largeur width. Je vais volontairement lui dire trente pour cent. Alors, vous allez me dire, oui mais attend trente pour cent, soixante pour cent, ça fait quatre-vingt dix, regardez ! Ici, il est à trente pour cent, il est tout petit, mais il ne flotte pas. J'ai un clear-left qui l'empêchait de flotter. Si on enlève ce clear-left, maintenant, n'oublions pas que le main flotte à gauche Regardez ici, le aside il est passé et il flotte. Mais comme le main est sorti du flux, il flotte à gauche et il se met derrière. En fait, ce qu'on va faire, c'est demander au aside de flotter à droite. Regarder si je lui donne un float-right, crtl+S quand j'y vais, mon aside est bien passé à droite. Du coup, le footer, plus rien ne le retient, il remonte. Il va falloir que je vienne ici au footer et lui signifier que je fais un clear. Le problème c'est si je fais un clear-left il va flotter derrière à droite du aside, Et si je lui fais un clear-right, il va flotter à la gauche du main. Donc, ici il faut que je lui fasse un clear-both. Tu ne suis personne, ni droite, ni gauche. Tu restes au milieu. Et là, mon footer est bien en-dessous, derrière. Par contre, moi j'aimerais qu'il vienne bien au bord tous les deux. Il faut que je donne à mon aside un peu plus de largeur. Donc, si admettons, je lui mets une marge. Un margin de 10 pixels. Ici, il va bien prendre son dix pixels de marge. Il a bien fait. Il a une marge gauche et une marge droite, super. Á l'inverse, si je lui donne un width de quarante pour cent, (je l'ai mis dans le footer, pardon ! je vais le mettre dans le aside, ctrl+S). à ce moment-là, le aside il part car il toucherait là. Alors, il faudrait jouer sur le modèle de boîte, le box-sizing. Dire, ce que je veux, c'est en dehors du border, en dehors de tout. Ici, je vais volontairement revenir changer dans mon main, en border* et non en outline pour pouvoir le rentrer dans le modèle de boîte. Rappelez vous justement en outline, il ne rentre pas dans le modèle de boîte. Ce que je vais faire, c'est commenter sur le aside, cette largeur, et au niveau de cette largeur, je vais pouvoir lui dire que le width est égal à une calculation qu'on va faire. Vous vous rappelez de cette propriété ? Cette calculation, je vais lui dire : c'est quarante pour cent moins les dix pixels que j'ai de bordure, moins un autre dix pixels de margin, moins un pixel, moins un pixel de bordure. Si j'actualise ma page, le aside est bien remonté dans la partie haute. Pourquoi ? Parce qu'il lui a été retiré tous ces éléments-là qui pouvaient le gêner. Que me reste-t-il à regarder ? Ce serait de peut-être donner de la hauteur à ces aside, de donner de la hauteur aux footers, des espaces un peu différents et puis d'enlever tous ces borders ou outline qui m'ont servi simplement à positionner les éléments. Ici on pourrait utiliser un table cell, en disant que c'est une table cell qui fait soixante pour cent. Ici, une table cell qui fait trente pour cent ou quarante pour cent. Peu importe, ce serait peut-être plus facile, parce que ça ne nous demanderait pas de faire un clear box, au niveau du footer etc. Donc, bienvenue dans l'entrée du monde de la flottaison à ce niveau là. Par contre, ce qu'il y a d'intéressant, c'est que la flottaison va rester sur une disposition qui va bien s'adapter qui va bien s'adapter en fonction de la dimension du navigateur parce que tout est en pour cent dès que l'élément peut flotter, il remonte comme une bulle qui remonte à la surface.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 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 !