CSS et mise en page - 4 Flotter absolument dans un flux relatif ?

24.09.2007

Retour du titre avec jeu de mots pourrave inside. Désolé (quel hypocrite je fais, tout de même…).

Le plat du jour

Jusqu'ici, on a posé les bases de la conversation : l'organisation en arbre du document, les boîtes, leurs deux principaux types possibles, leurs principales caractéristiques. Aujourd'hui on va parler de leur placement dans l'écran, et ça va être un peu plus hard. Concrètement, il sera question des propriétés position, float et de quelques autres. Mais vous êtes très fort (qui a lu Benoît Brisefer quand il était petit(e) ?) donc ça va bien se passer, j'en suis certain.

Plus sérieusement tourné : il ne s'agit que de vous expliquer à ma façon ce que dit la spécification CSS sur les schémas de positionnement. Elle le dit de manière complète et rigoureuse, dense et un peu abrupte ; de mon côté je n'en retiens que ce qui sert le plus souvent, en l'illustrant d'exemples tirés de la pratique. Si vous avez l'impression de piger mes articles, une bonne idée est d'aller ensuite regarder la spécif pour recouper, compléter et, je l'espère, confirmer ce que je raconte.

Le flux, c'est quoi c'te bête ?

L'article précédent disait que le navigateur remplit l'écran sous la dictée du fichier HTML : il commence par le début du fichier et termine par la fin. L'ordre d' écriture, l'ordre d'apparition dans la fenêtre, reflètera cet ordre de lecture : le pied de page sera toujours écrit en dernier.

La mise en page, la disposition de la fenêtre, elle, peut être perturbée par le CSS – c'est même ce qu'on attend de lui. Pourtant le pied de page, même s'il s'écrit tout en haut de la fenêtre ou au beau milieu des articles, sera tout de même écrit en dernier lieu. Gardez toujours ceci à l'esprit.

Si le CSS ne contient rien de trop tordu (encore plus simple : s'il n'y a pas du tout de CSS !), la mise en page suit l'ordre d'écriture dans la fenêtre et correspond donc directement à l'ordre du fichier HTML : les blocs successifs de haut en bas et, à l'intérieur des blocs, les boîtes en-ligne à la queue-leu-leu. Cette succession des boîtes à l'écran, reflet de la succession des éléments dans le fichier, c'est ce qu'on appelle le flux normal, ou le flux pour faire court.

Observation de blogueur futé : oui mais… les modules s'affichent à côté des articles plutôt qu'en dessous, pourquoi ? Réponse : même un blog très simple est déjà fichtrement élaboré, et doté d'un CSS fourni par OB. Une page de blog ne se réduit pas à trois div qui gambadent dans des couleurs artistiques. Aussi n'ai-je pas mis les démos qui accompagnent les articles de cette série dans un blog mais totalement à part. Ainsi leur code source et leur CSS restent simples à lire et interpréter si l'idée vous venait d'y jeter un coup d'œil – sait-on jamais ?

Le flux, qu'est-ce que j'en ai à cirer ?

Pour un fichier HTML donné, où l'ordre des éléments est ce qu'il est, tout l'art de la mise en page consiste à perturber intelligemment le flux pour placer certaines des boîtes (engendrées par les éléments – oui, je l'ai déjà dit) à l'endroit désiré à l'écran. Ces perturbations peuvent être profondes, elles ne peuvent cependant pas ignorer l'organisation du fichier HTML.

Gné ? Exemple concret. Il y a, de haut en bas, trois grandes zones dans une page de blog :

le bandeau supérieur, de même hauteur sur toutes les pages – disons 100 pixels ;
la zone des articles (et modules), zone dont la hauteur varie généralement d'une page à l'autre ;
le pied de page, de même hauteur sur toutes les pages – 100 pixels lui aussi.

Dans le fichier HTML, les trois zones sont écrites dans cet ordre. Les trois boîtes correspondantes s'empilent, le haut de l'une venant contre le bas de la précédente. Ainsi, le pied de page accompagne la zone d'articles dans ses variations de hauteur, ce qui semble normal et naturel.

Jusqu'où peut-on chambouler ceci ? On peut imposer à l'une ou l'autre de ces boîtes de se placer à une altitude précise dans la fenêtre, mettons 200 pixels. Facile à imaginer.

On peut imposer au pied de page d'être tout en haut, au bandeau de planer à 100 pixels et aux articles de commencer à 200 pixels. On donne ainsi l'illusion que le pied de page est écrit avant les deux autres, n'empêche que la fenêtre se remplira toujours dans l'ordre bandeau / articles / pied de page.

On peut même laisser le pied de page au sommet, caler les articles à 100 pixels et le haut de page très bas dans la fenêtre. Mais on ne pourra pas lui imposer de se placer juste après les articles quelle que soit leur hauteur, de les suivre dans leurs variations de hauteur : il faudrait pour cela changer l'ordre dans lequel est écrit le HTML . Convaincu ?

Conséquence pratique pour blogueurs OB : si l'envie vous prend de déplacer ou supprimer un élément de design, regardez d'abord si c'est possible par l'onglet configuration de l'admin (cet onglet intervient sur le HTML de vos pages) avant de plonger dans le CSS. Permuter des modules, écrire recommander avant commentaires à coups de CSS, c'est possible mais très, très, très, très fastidieux.

Dévier le flux, mais comment ? position et float

Cela se précise au niveau de chaque élément ou boîte, et pas globalement. Aucun moyen de dire je veux tout écrire de bas en haut , par exemple : il s'agit bien de dévier, de perturber le flux des boîtes en certains points, pas de le renverser. Ne vous étonnez donc pas de lire qu'une boîte ou un élément est dans le flux ou retiré du flux , c'est tout le propos de cet article.

Les propriétés concernées, comme annoncé, sont position, float et leurs satellites top, bottom, left et right pour la propriété position, clear pour la propriété float.

Première approche :

position : static

Ça, c'est le cas par défaut, donc pas besoin de le spécifier, donc vous ne l'avez sans doute jamais vu dans un CSS.

Un élément static suit le flux… cela sonne étrangement mais on peut l'interpréter ainsi : l'élément (sa boîte) reste à sa place normale , attendue, dans le flux . Il est statique par rapport au flux, non par rapport à la fenêtre du navigateur.

position : relative

La pointure au-dessus. L'élément reste dans le flux et la mise en page se fait normalement. Mais, quand tout est fini, le navigateur décale l'élément par rapport à sa place d’origine dans une des quatre directions possibles (on peut les combiner), et l'écrit par-dessus le flux normal dont la disposition ne change pas. Naturellement, si l'élément en contient d'autres, tout le monde suit le mouvement. position : relative est facile à comprendre et utiliser sans se prendre la tête. Exemple simple et répandu, faire bouger les liens quand on les survole :

 a:hover {position:relative; right:0.5ex}

J'insiste tout de même sur par-dessus : {margin-left:20px; margin-right:-20px} décale aussi un élément de 20 pixels vers la droite, mais le suivant lui marchera sur les pieds sans hésitation (question déjà évoquée à la fin du deuxième article)

Si le décalage est zéro ou s'il n'est pas mentionné du tout, l'élément reste en place et rien ne change. Il y a un intérêt ? Oui, mais on en parlera plus tard.

position : absolute

L'artillerie lourde. D'abord, une nouveauté : l'élément sort du flux. Comprendre : rien ne change pour ceux qui le précèdent dans le flux, mais ceux qui le contiennent ou le suivent font comme s'il n'avait jamais été là – exactement comme pour display : none.

Ensuite l'élément est traité comme une boîte de bloc, même s'il est en-ligne à l'origine. On peut donc en indiquer la hauteur et la largeur (height et width).

Enfin l'élément vient à des coordonnées indiquées par top et/ou les trois autres, et se place par-dessus le flux normal.

Coordonnées oui, mais par rapport à quoi ? Pas par rapport à lui-même comme tout à l'heure. La réponse est logique mais longue, elle viendra plus tard. Et si j'indique top et bottom, pour voir ? Mon (ma) jeune ami(e), vous commencez à me courir mais je répondrai tout de même. Plus tard.

Si top et les autres ne sont pas indiquées du tout, l'élément sort toujours du flux (les contenants et les suivants font comme s'il n'était pas là), s'écrit toujours par-dessus le flux normal, mais ne bouge pas. Il y a un intérêt ? Oui, mais… ça va, on sait : plus tard . Ah ben zut alors, comment vous avez deviné ?

position : fixed

Comme le précédent, mais là je peux tout de suite vous dire par rapport à quoi on place la boîte : par rapport à la fenêtre. Donc la boîte ne bouge pas quand on scrolle dans la fenêtre. Permet des effets intéressants mais n'est pas compris par IE (au moins jusqu'à la version 6) qui le traite comme position : absolute. Dommage…

float

Celle-là, vous la connaissez sûrement. Vous n'y avez rien compris ou, pire, vous avez cru comprendre jusqu'au jour où vous êtes tombé dans une m… sans fond – condoléances, I know the feeling. Inutile de vous lanterner, on va faire le prochain article rien que pour elle. Les histoires de position attendront encore un peu.

Merci à Anna pour avoir révisé cet article et le précédent, merci au Pont-Neuf pour la touche finale.

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

Inline et block Flottants : la théorie Premier article

1 Entrée en matière
2 Sortons en boîte
3 Boîtes en-ligne et boîtes de bloc
4 Flotter absolument dans un flux relatif ?
5 Fluctuat nec mergitur
5bis Fluctuat sed merditur
6 Plus c'est moins grand, moins c'est plus petit. Vous voyez ?
7 Le pifomètre et l'absolu
8 Recette du mille-feuilles