Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
24 septembre 2007 1 24 /09 /septembre /2007 05:00

détail du 'Dragon' de Max Escher

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 !

Mascaron2.jpg

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.

commentaires

Sagan33 21/03/2012 16:38

Un peu hors sujet, mais cet article m'amène les réflexions suivantes :
C’est grâce à des blogs comme celui-ci, que nous pouvons avancer.
Bien entendu à cause de son atout, le partage. En effet, n’échange pas qui veut, ses informations. Je me rappelle avoir lu une fois sur le forum une discussion au sujet des modules déplaçables qui
avait recueilli certes une, voire même deux réponses / oui, mais tellement occultées et tronquées que la pauvre personne en est très certainement restée à son point de départ.
Heureux qui comme Ulysse a croisé le chemin de ce blog.
Bonne soirée.

WvS 22/03/2012 13:30



Hééééé ben !



ღ ღ ღ ♥ nessa ♥ღ ღ ღ 12/02/2010 21:45


attention loin de moi cette idée ;-)


AïmD ! 12/02/2010 22:00


N'aie crainte ! :-D :-D Mais on voit tant de choses...


ღ ღ ღ ♥ nessa ♥ღ ღ ღ 12/02/2010 20:41


ah on aura jamais de tuto "général" alors ? si non je ne dis pas que tu expliques mal lol simplement que ces explications sont plus accessibles aux informaticiens qui connaissent parfaitement le
langage htlm; d'où ma rubrique design "grand public" : j'ai un auditoire très littéraire hihi enfin on peut être "matheux" et littéraire ..... ce n'est pas moi qui le dit c'est une aminaute qui ne
comprenait pas mes tutos archi simples et qui me disait: "on ne peut pas être tous matheux comme toi"! bizzz bonne soirée


AïmD ! 12/02/2010 21:21


un tuto sur mes 'tites n'images ? Je ne vois pas trop, sinon je l'écrirais.
Sur la confection de GIFs animés il y a déjà un tas de choses sur la Touâle, rien que (j'imagine) dans les divers forums consacrés à The Gimp ou Photoshop
Les intégrer au blog pose ni plus ni moins de problèmes que d'intégrer n'importe quelle image de fond.
Je peux toujours te donner l'url d'un de ces gifs, tu comprendras peut-être mieux ce que je raconte à propos de l'intégration de la bibliothèque dans l'animation:
http://idata.over-blog.com/0/38/68/97/fonds/animations/frevgen.gif

Sur la présente série d'articles : elle ne demande pas de connaître parfaitement le langage, mais avoir déjà mis les mains dedans, buté sur des difficultés, aide incontestablement à piger ce que je
raconte. Ce ne sont pas des articles pour débutants sans expérience pratique. C'est très difficile d'écrire pour des débutants quand on veut fournir davantage que "copie ça" et "clique là" - et se
faire à bon compte une réputation de grand expert.



ღ ღ ღ ♥ nessa ♥ღ ღ ღ 11/02/2010 22:16


sympa les coms hihi; mùoi j'ai l'impression en te lisant de me replonger dans mes vieux cours de latin qui expliqueraient du htlm! là je ne sais même pas si je suis bien tombée je cherchais comment
tu faisais pour mettre ces petites images qui apparaissent ici et là....


Wilhelm von Schmürz (responsable technique et design) 11/02/2010 23:12


"Le HTML expliqué comme du latin" : joli, mais je ne sais pas si c'est très rassurant !
Petites images : je ne l'explique nulle part parce que c'est vraiment très lié au design de CE blog, qu'il n'est pas envisageable de faire un copier/coller béton.  Je peux quand même te donner
les grandes lignes
1-ce sont des gif animés
2-de confection maison (suffit de voir les motifs...)
3-fabriqués image par image, en mixant progressivement une partie de l'image de bibliothèque avec le motif à faire venir.
4-Ensuite il y a une forte cuisine de CSS.
D'abord l'image de fond (la bib) est en background-position:fixed (déforme la fenêtre, fais-la défiler : tu verras que le coin en haut à gauche contient toujours les memes livres). Les version
claire, sombre et très sombre de cette bib que j'utilise comme fond dans les modules, les bandeaux... sont elles aussi en position:fixed, ce qui fait que tout ce petit monde se superpose au pixel
près.
Ensuite ce fond est attaché à l'élément html : body reste 'libre', sans fond particulier. Ce qui me permet d'utiliser le gif animé comme fond de body, lui aussi en position:fixed. Ca permet de
raccorder au poil le fragment de bib présent dans le gif animé et la grande image de bib. Ca implique aussi que le gif ne bouge pas quand on étire, déforme, défile la fenêtre.
5-enfin il y un chtit bout de JS qui, lorsque la page est chargée, choisit au hasard un fond parmi les six ou sept disponibles et met en place le CSS correspondant.

Comme tu vois, c'est du sur mesures intégral...


mebahel 07/11/2007 15:19

Y'a pas à dire, j'préfère l'pont neuf.
Même le vieux aussi.
Faire le zouave,ça va bien un temps, là, je coule.
Glou.
;-)

Aïe mes doigts ! 07/11/2007 22:50

Je me sens tenu de faire, rien que pour toi, un papier sur la crue de 1910 ... ;-D

Archives