CSS et mise en page - 5 Fluctuat nec mergitur

24.09.2007

Ce titre-là n'était pas négociable… Au programme d'aujourd'hui, la transcription à ma sauce de cette partie de la spécification CSS dont la lecture est fort instructive. Cachez votre joie.

Mise en jambes : les boîtes de ligne

Encore une espèce exotique ? Lààà… calmez-vous. Ce n'est pas une variante des boîtes en-ligne , même s'il y a un rapport direct.

Rappelez-vous, j'ai dit quelque part qu'une boîte en-ligne a une forme de rectangle mutilé , amputé, qu'elle peut occuper une ou plusieurs lignes d'affichage, se raccorder à la précédente boîte en-ligne sur la même ligne d'affichage… pas facile de parler avec précision d'une forme aussi variable.

Hé bien voilà : une boîte DE ligne est le rectangle, un vrai rectangle, qui contient une et une seule ligne d'affichage . Ce rectangle va d'un bord à l'autre du block box dans lequel on a fourré les inline box . Quand deux inline box (deux span , mettons) se suivent, le début de l'une se range après la fin de l'autre pour compléter la boîte de ligne. Si, par exemple, le deuxième span est plus haut que le premier, la hauteur de cette boîte de ligne augmente pour digérer le raccord, ne pas empiéter sur les boîtes de ligne voisines et rester un rectangle.

Les boîtes bloc et en-ligne correspondent directement aux éléments du document HTML. Un même élément engendre une boîte, parfois zéro, parfois plusieurs, mais une boîte donnée ne peut provenir que d'un seul élément. Une boîte de ligne, à l'inverse, peut contenir des données en provenance de plusieurs éléments successifs ; elle n'est vraiment qu'une case tracée sur la feuille pour organiser le travail.

Synthèse :

à l'origine de tout, à la racine se trouve le body ( root element ). C'est un block box , un rectangle ;
un block box (rectangle) ne contient ou bien que des inline box (patatoïdes) ou bien que des block box (autres rectangles) ; le cas mixte est ramené au précédent en emballant chaque groupe d' inline box consécutives dans un block box anonyme.
les inline box (patatoïdes) se rangent dans une succession verticale de boîtes de lignes (à nouveau des rectangles).

Le problème se ramène donc, en définitive, à empiler proprement des rectangles dans des rectangles. Finasserie ? Onanisme cérébral ? Indispensable pour expliquer la suite.

Un flottant, qu'est-ce que ça fait et comment ça marche ?

D'abord, ça convertit la boîte de l'élément en une boîte de bloc. On peut donc indiquer sa hauteur et/ou sa largeur – en fait pour la largeur on doit, et la raison arrive bientôt (oui !). Cette boîte est retirée du flux et vient par-dessus le reste. Cependant elle continue d'influencer ce reste, d'une manière particulière.

Voilà notre élément dans sa boîte de bloc, avec l'emballage habituel de remplissage, bordure, et marge. S'il y a déjà des choses normales , non flottantes, dans son bloc conteneur, la boîte, en bon bloc qu'elle est devenue, descend d'une ligne (d'une boîte de ligne …) pour avoir toute la piste de danse rien qu'à elle. Elle effectue alors une longue glissade de l'endroit où elle se trouve jusque tout contre le bord gauche (si float:left) ou droit (si float:right – bravo !) du conteneur.

Précisons : glissade jusqu'au bord du conteneur sauf si, en chemin, le flottant bute contre un autre flottant déjà là. S'il n'arrive pas à rentrer dans l'espace laissé libre par ce flottant qui précède, il passe à l'étage en-dessous.

Et voilà pourquoi il faut imposer une largeur au flottant : un bloc, par défaut, occupe TOUTE la largeur de son bloc conteneur. Dans le cas d'une image flottée, et si vous n'indiquez pas sa largeur, vous avez une double dose de chance : 1°) le navigateur se basera sur les dimensions intrinsèques de l'image et 2°) si vous utilisez l'outil FCKedit d'insertion d'image, cet outil se chargera en plus de compléter le code HTML comme il faut. Bande de vernis. Si vous flottez un petit span de texte, là aussi avec un peu de chance (tout dépend du navigateur utilisé, donc ne pas compter là-dessus) il n'enflera pas. Dans tous les autres cas le float, considérant qu'il est désormais un bloc, occupera toute la largeur et le texte continuera en-dessous, sans effet de flottage visible.

Règle pratique : quand on se mêle d'écrire ses floats soi-même, on en précise toujours au moins le width .(exemple sous vos yeux !)

Précisons toujours : on parle bien du bloc conteneur (le plus proche ancêtre de type bloc , au pire le body) parce que les inline box sont décidément trop bordéliques.

Synthèse de ce qui précède : les flottants permettent de faire de l' empilement horizontal avec des blocs, d'où leur nom, alors que le flux normal ne connaît que l'empilement vertical.

Blogs OB : quand on trafique les largeurs des colonnes de son blog, d'abord on les indique pour toutes les colonnes (car elles sont des flottants), ensuite on s'assure que le total (y compris marges, bordures et remplissages) n'excède pas la largeur du blog.

Exemple OverBlog : la colonne d'articles et celle(s) de modules sont des flottants (vers la gauche), contenus dans un div (nommé #ln_1, vous le savez sans doute).

Cette démonstration, déjà vue dans le deuxième article, montre ce qui arrive lorsque ces colonnes deviennent trop larges. Les habitués reconnaîtront le syndrome du SOS URGENT GRAVE mon blog est tout cassé .

Comment ça perturbe le reste ?

Voilà donc le flottant, ou la succession de flottants, calé(s) contre le(s) bord(s) gauche et/ou droit du bloc conteneur. Bien. Si ce conteneur ne contient que ce(s) flottant(s) (comme le fait #ln_1), tout est dit. Et s'il contient autre chose ?

C'est typiquement le cas d'un article de blog : on cale une image contre un bord, que faire des boîtes inline qui encadraient cette image ? Hé bien le navigateur fabrique pour ce reste des boîtes de ligne qui rentrent dans la place laissée libre et, quand il atteint le bas du flottant qui bouche la vue, les boîtes de ligne regonflent . Résultat visuel : le texte s' écoule autour de l'image flottée. Exemple au début de cet article, où le dragon est flotté vers la droite et où, dans le HTML, le texte de l'article est écrit après l'image du dragon. Exemple analogue avec les deux règles pratiques juste au-dessus, chacune écrite avant le(s) paragraphe(s) qui se trouve(nt) à sa gauche.

Question : l'image au milieu de l'article et le texte de part et d'autre, comme avec Word, on peut ? Il y a un float: center ? Ben non. Sans être dans le secret des dieux, j'imagine que le travail du navigateur serait effroyablement compliqué : écrire de gauche à droite en enjambant l'image ? Ou plutôt remplir une colonne de texte à gauche de l'image, caser l'image, puis remplir une colonne de texte à droite et enfin reprendre le cours normal ? Et que faire s'il y a d'autres flottants dans ce texte ? Word raisonne pleine page , ignore les questions de flux, d'avant et d'après, mais c'est un traitement de texte installé sur le micro, il peut se promener à sa guise dans le fichier et dans l'écran, pas comme un navigateur qui reçoit une page goutte à goutte à travers un réseau et la met en forme au fur et à mesure.

On peut tout au plus laisser une marge importante à gauche du flottant (s'il est poussé vers la gauche) : l'image sera plus près du milieu de l'article mais le texte ne s'écoulera que du côté laissé libre par le flottant (à droite). Permutez gauche et droite pour un flottant vers la droite. À vous de faire le moins mauvais choix.

Dernière question : pourtant, chez OverBlog, on peut demander qu'une image soit centrée par rapport au texte… alors ? Alors remarquez qu'il n'y a, dans ce cas, aucun texte de part ni d'autre de l'image : ce n'est pas du flottage , c'est une définition habile des marges de l'image et c'est une autre histoire. Pour plus tard, évidemment.

Comment arrêter de perturber ? la propriété clear

Celle-là, elle s'attribue à ce qui suit un flottant dans le flux (et qui peut être un autre flottant, d'ailleurs) mais elle ne concerne que les boîtes de bloc et pas les boîtes en-ligne. Une boîte en-ligne, par sa nature, est vouée à remplir l'espace qu'on lui propose ; au fond, elle n'a pas de forme propre, elle est liquide .

Reprenons l'exemple d'une image flottée à gauche et du texte qui la suit, voici l'essentiel du HTML concerné :

 <img style="float:left" src="..." /> <p>blablabla</p> <p style="clear:both">blublublu</p>

La même chose en utilisant les classes disponibles chez OB :

 <img class="GcheTexte" src="..." /> <p>blablabla</p> <p class="clear">blublublu</p>

Le premier paragraphe (blabla) s'écoulera à droite de l'image, comme expliqué à l'instant.

Le deuxième paragraphe (blublu) va refuser de se contenter de la largeur laissée libre par l'image. Il commencera au-dessous de l'image, dans la pleine largeur de l'article, dans des boîtes de ligne king size , même si cela doit laisser un grand blanc après le paragraphe précédent.

En l'absence du clear, le deuxième paragraphe s'inscrirait juste après le premier. Voilà tout le secret.

Pour tout vous dire, clear peut aussi prendre la valeur left ou right (aucune classe prévue chez OB). Dans ce cas, le refus ne concerne que les flottants vers le côté indiqué.

J'y comprends rien, je veux voir !

Voilà déjà une démonstration d'ensemble pour vous occuper un moment.

Pour des exemples réels, pour des idées sur ce qu'il faut faire et ne pas faire, sur la manière de ne pas devenir dingue, rendez-vous au prochain article ; vous avez assez souffert et j'en ai un peu marre moi aussi…

Toujours merci à Anna première lectrice et à ce cher Pont-Neuf.

Pas compris ? Pas d'accord ? Parlez-en en commentaire.

Flux, float, position Flottants : la pratique Premier article