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

détail du 'Dragon' de Max Escher

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 :

  1. le bandeau supérieur, de même hauteur sur toutes les pages – disons 100 pixels ;
  2. la zone des articles (et modules), zone dont la hauteur varie généralement d'une page à l'autre ;
  3. 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
Mascaron1.jpgCelle-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.

commentaires

Axi 04/03/2011 14:30


En train de faire un petit site web, je me heurte à un problème de flottants dont je ne me rappelle plus la solution...C'est alors que je me rappelle de cet excellent cours de CSS sur le blog de
Brendufat. 30 secondes après, non seulement j'ai ma réponse, mais j'ai le sourire !

Franchement, aucune documentation n'est aussi efficace - ni aussi drôle ! - que cette série d'articles. Encore bravo.


Aïe mes doigts ! 04/03/2011 19:32



Quelle belle histoire :-) et content je suis de te lire ici.


Le dernier compliment est très agréable mais un peu excessif (au moins pour l'efficacité) : si j'ai mis beaucoup de choses dans ces articles il y a quelques bourdes, quelques affirmations
inutilement péremptoires et l'ensemble, comme souvent dans mes papiers, est un peu confus. Mais bon, si ça rend service et fait passer un bon moment, je n'en ai pas honte !



Julie 07/11/2007 11:05

Si je te fais ce compliment c'est que j'ai vraiment trouvé ça clair ;) Sinon je t'aurais signalé les points restés obscurs^^

Mais bon, j'ai compris, la prochaine fois je ferai ma râleuse....

Biz ;)

Julie 06/11/2007 19:33

toujours aussi limpides tes explications. Vraiment, c'est super de faire des articles comme ça.

Bises.

Aïe mes doigts ! 06/11/2007 19:46

Rraaahhhhhh .... enfin UNE qui me renseigne un peu !Le compliment fait plaisir mais il n'était pas obligatoire : je suis preneur aussi pour les critiques-z-et suggestions, naturellement fondées-z-et constructives. ;-)

Tietie007 01/11/2007 18:02

J'aime bien la tête sulptée !

rififi 01/11/2007 10:45

maman les p'tits favicons qui vont sur l'eau ont-ils des fluuuuxeu
mais oui mon gros bêta s'ils n'en avaient pas ils ne floatraient pas ;o)

Aïe mes doigts ! 01/11/2007 15:27

Et pas un seul pour me parler du sujet ! Tssss... z'êtes décourageants ! :-D

Denis LAGARDE 31/10/2007 22:24

Benoît Brisefer, je connais bien! Et son oncle aussi.
Mais le petit a disparu dans les affres commerciales d'une publicité pour une boisson chocolatée.
Rhaaaa lala, j'vous dis pas M'me Michut... tout ce bazar.
;-{)

Archives