Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
17 décembre 2009 4 17 /12 /décembre /2009 00:50

détail du 'Dragon' de Max Escher

Quel paradoxe qu'un titre aussi vague avec l'adjectif  déterminé  à l'intérieur…

Cet article espère vous montrer qu'on peut se servir très simplement du positionnement absolu pour une mise en page au rasoir.

Note, août 2010 : correction d'une grosse étourderie dans les noms de classe. Il ne fallait pas hésiter à me dire que l'article ne tenait pas debout, voyons !


copie d'écran (détail)

Commencez par regarder cette page d'archive, plus spécialement le coin inférieur droit de chaque extrait d'article. Vous y trouverez la date de l'article. Et alors ?

Alors regardez maintenant le code source de la page, cherchez-y l'article en question. Vous verrez ceci (avec juste des espaces en plus un peu partout)

 <li class="listArticles article_item_even"> <a href="http://brendufat.over-blog.com/article-14258226.html"> Carte postale - On a retrouvé la tour Saint-Jacques !</a> (<span class="DateListe">30/11/2007</span> <span class="categorieArticle"> publié dans : <a href="http://brendufat.over-blog.com/categorie-10612437.html"> Cartes postales</a></span> ) <br> <div class="resumeArticle"> Que finalement ce soit Monsieur Lagardère qui promeuve le dernier ouvrage signé, et peut-être écrit, par Monsieur Sulitzer au moyen d'une campagne prouvant plus d'ingéniosité que de vergogne, ma <a href="http://brendufat.over-blog.com/article-14258226.html">...</a> <div class="clear"></div> </div> </li> 

On y voit qu'un élément li contient tout le pavé de l'article, et que ce pavé se compose d'un lien a, de quelques span d'informations diverses (celui de la date est en gras) et, pour finir, d'un div contenant les premières phrases de l'article. Et alors ?

Alors la date est écrite avant les premières phrases. Ça se change de place, ça, non ? comme pour les articles ? Ce serait en effet le meilleur choix – s'il existait : on ne peut pas modifier la config de ces extraits d'articles.

Écrite avant l'extrait, la date doit normalement s'afficher avant lui. Alors comment ai-je fait ?

Ce que je n'ai pas fait

Je n'ai pas cherché à faire du flottant : s'il aurait permis de placer la date tout à fait à droite ou tout à fait à gauche, il n'aurait pas permis de changer sa place verticale.

Je ne me suis pas lancé dans un jeu compliqué de marges très positives d'un côté et très négatives de l'autre : précisément, c'est un jeu compliqué (et puis il y a d'autres raisons, attendez l'alinéa suivant).

Je ne me suis même pas lancé dans le jeu un peu moins compliqué de mettre cette date en position:relative pour la faire descendre, parce que la  descente  requise dépend du nombre de lignes dans l'extrait d'article – sur la page montrée ils contiennent tous deux lignes, c'est un pur coup de bol.

En outre, qu'on joue avec du flottage, des marges, du text-align ou du positionnement relatif, l'emplacement horizontal de cette date dépend évidemment de la longueur du titre à sa gauche et/ou de celle des autres span à sa droite.

Bref : ça sort de l'ordinaire.

Ce que j'ai fait

Je me suis d'abord demandé ce que je voulais vraiment. Je voulais que cette fichue date se place dans le coin en bas à droite du pavé, quelles que soient les dimensions de ce pavé, et même si un jour je changeais de taille de caractères. Tiens d'ailleurs : faites l'essai de grossir les caractères sur la page indiquée. Vous verrez l'extrait d'article grossir, contenir plus de lignes, et la date l'accompagner dans son gonflement : la date est bel et bien liée à ce coin inférieur droit.

Ensuite je suis allé lire chez mon copain yoyo (pas vrai, il y a longtemps que c'est fait !) pour chercher des idées. L'idée, ici, c'est position : absolute.

Le positionnement absolu

Il demande de répondre à deux questions :

  1.  Qu'est-ce que je veux mettre ailleurs qu'à sa place normale ?  Cette question-là est toujours facile. La réponse ici est : le span de classe DateListe ;
  2.  Qu'est-ce qui va me servir à définir la nouvelle place ?  Cette question-ci est parfois plus tordue, nous la regarderons ensuite.

Je ne veux plus être à ma place normale…

… demande la date. Bon. Pour lui faire plaisir on complètera le CSS en ajoutant une ligne (ou en complétant une ligne existante) :

 span.DateListe {position:absolute} 
ligne à laquelle s'ajouteront bientôt d'autres indications pour mettre la date à la place voulue.

Je veux de nouveaux points de repère…

… demande-t-elle encore. Répondre demande un peu d'attention.

Ce nouveau référentiel ne se choisit pas arbitrairement. Il doit être un élément qui contient celui qu'on veut déplacer, ou qui contient un élément qui à son tour contient, ou qui… Dans notre exemple, cela signifie qu'on ne peut pas dire  en bas à droite du div resumeArticle , parce que la date se trouve en-dehors de ce div. Mais, en remontant de contenant en contenant, on peut la placer par rapport à

  • le li de classe listArticles ou
  • le div de classe articles ou
  • … ainsi de suite jusqu'au body.

Cette figure résume le propos, tous les référentiels envisageables y ont un fond de couleur : vert pour les plus plausibles, gris pour ceux possibles en théorie mais malcommodes en pratique :

DateArchiveInspector

Pourquoi  malcommodes  ? Parce que difficiles à spécifier précisément sans utiliser des sélecteurs très complexes et pas compris par tous les navigateurs : div ou ul sans classe ni identifiant peut désigner beaucoup de monde. Inversement #cl_1_0 est, par nature, unique dans la page (puisque c'est un identifiant) et .listArticles ne désigne qu'un certain type de li qu'on ne trouve pas n'importe où.

Admettons. Dans notre exemple le nouveau référentiel va de soi : on veut  caler  la date par rapport au li de classe listArticles. Pour le dire exactement, on veut caler chaque date par rapport à chaque li.

Comment le rendre en CSS ? On ne dit pas à DateListe :  tu vas te repérer sur listArticles . On fait l'inverse en disant à listArticles :  Félicitations ! Tu vas servir de repère à tous les absolus que tu transportes ! . Pas seulement à DateListe, donc. En termes plus sérieux ça s'écrit :

 .listArticles {position:relative} 

C'est tout ? Presque. Reste à utiliser ce repère : je vous dis  le li  depuis le début, mais quelle partie de cet élément ? Marges, bordures, padding… quelle influence ? Réponse : le référentiel est le rectangle dessiné par le contenu de l'élément (ici, le titre, les span et le début d'article) et son padding. Pour vous fixer les idées : c'est le rectangle qui se trouve à l'intérieur des bordures quand on en définit.

Sachant maintenant de quoi nous parlons, nous pouvons enfin placer la date en disant (ou pas) quelle distance sépare chacun de ses bords du bord correspondant du référentiel. Nous la voulons en bas à droite, autrement dit que ses bords bas et droit soient contre les bords bas et droit du listArticles, alors :

 span.DateListe {position:absolute; right:0; bottom:0} 

En définitive tout ceci se ramène à deux lignes de CSS :

 .listArticles {position:relative} span.DateListe {position:absolute; right:0; bottom:0} 
qu'il faut naturellement compléter par du travail décoratif sur .DateListe : couleur de fond etc. .

J'ai pondu, en son temps, un long topo (9 articles ! au fou !) sur ces questions, vous pouvez toujours essayer.

Vous pouvez aussi goûter aux articles de la page d'archive…

commentaires

Archives