CSS et mise en page - 5bis Fluctuat sed merditur

24.09.2007

"Il flotte mais il merdoie" : même pas honte du titre…

C'est pourtant vrai que ça merdoie

On voit bien que le flottage pousse une image ou une case de menu horizontal vers la gauche ou la droite, mais on n'anticipe pas toujours ce que ça fait d'autre, faute de bien le comprendre. Alors on dit que ça marche une fois sur deux, et que c'est réservé à quelques fous furieux. Triste, tout de même.

Petit résumé de l'essentiel :

en effet, l'image (ou autre) est poussée sur le côté ;
ce qui suit l'image vient se couler dans l'espace laissé libre à côté d'elle ; ceci concerne non seulement le bloc parent de l'image mais aussi les suivants ;
à moins que la propriété clear ne vienne forcer l'écriture à ne reprendre qu'après le pied du flottant.

Ça reste touffu. Après la théorie du précédent article, celui-ci va d'abord rappeler qu'on n'a pas toujours besoin d'un flottant, puis il décortiquera quelques cas concrets, donnant au passage de très simples règles de survie – dans l'espoir de dissiper vos complexes…

Du mauvais usage du flottant (d'après une histoire vraie)

Dès qu'il s'agit de pousser quelque chose vers un bord ou l'autre, on se dit bingo ! flottant ! . C'est parfois un bazooka pour chasser les moustiques : ruineux, dangereux, même pas toujours efficace. Exemple vécu et erreur de jeunesse : le bandeau d'en-tête de ce blog. On laissera de côté les questions de lien pour ne parler que de la disposition du texte.

Voilà le point de départ, tout simple :

 <div id="top">
 Jus de méninges<br />un blog .....
 </div>

Pour styler différemment les deux lignes, je les avais assez vite enfermées dans deux div, supprimant au passage le saut de ligne :

 <div id="top">
 <div id="t1">Jus de méninges</div>
 <div id="t2">un blog .....</div>
 </div>

Pour cadrer à droite cette forte devise j'avais, tout fiérot, mis

 #top {float : right}

… dans le CSS. Résultat : le bloc de texte glissait à droite mais les deux lignes restaient calées contre son bord gauche – et le bandeau rétrécissait à la largeur du texte. Arf ! Fallait pas toucher à #top. Alors j'ai descendu un étage, laissé #top tranquille et flotté à droite les deux blocs :

 #t1, #t2 {float : right}

Résultat : Jus , la première ligne, filait complètement à droite puis Un blog venait, sur la même ligne, buter contre Jus . De gauche à droite on avait donc : du vide, Un blog , Jus . Re-arf ! Dans un accès d'acharnement coupable, je mis donc un clear:right sur le deuxième bloc :

 #t1, #t2 {float : right}
 #t2 {clear : right}

Victoire ! Trop tôt : #top avait bien gardé sa largeur mais soudain maigri en hauteur. Explicable : ne contenant plus aucun texte normal, il avait adapté sa hauteur à celle d'un texte inexistant. Alors j'ai imposé une hauteur à #top :

 #top {height:80px}
 #t1, #t2 {float : right}
 #t2 {clear : right}

Règle pratique : avant de chercher à frimer avec des float, se demander si on en a vraiment besoin. Si l'espace à côté du candidat au flottage doit rester vide, text-align suffit souvent, et évite de multiplier les balises HTML.

Victoire ? Presque : avec Firefox, j'y étais. Avec IE le résultat était… étrange. IE ne gère pas toujours très bien les flottants quand aucun texte normal ne les accompagne, ou quand ce texte normal est trop court pour aller jusqu'au pied du flottant. Alors… alors j'ai compris que j'avais construit un bazooka : quel besoin d'un flottant si aucun texte ne doit venir s'écouler sur un de ses bords ? Il suffisait d'indiquer que je voulais, dans le bandeau, cadrer le texte à droite :

 #top {text-align:right}

Plus tard, lorsque le haut de page s'est enrichi d'un tas de trucs tels que la petite image qui indique la rubrique, au coin supérieur gauche de certains articles, cette règle portant sur tout le bandeau m'a compliqué la vie. Je l'ai alors reportée sur les deux lignes de texte :

 #t1, #t2 {text-align:right}

… ce à quoi j'aurais dû penser dès le début.

text-align , c'est bien !

Petit rappel sur text-align : cette propriété n'a de sens que pour les boîtes de bloc. Elle indique comment est cadré leur contenu dans les limites de la boîte (à gauche, à droite, ou centré). Elle n'a pas d'effet sur les boîtes en-ligne : puisque leur largeur est pile celle de leur contenu, il n'y a rien à cadrer.

Un texte à gauche, un autre à droite : précédent, premier, suivant

Ça, c'est le bandeau qui termine cet article. Pour obtenir cet effet, on pourrait créer une table à une ligne et trois colonnes, et styler chaque colonne individuellement. Ça marche très bien, mais au prix d'un balisage HTML assez lourd et peu significatif : les table sont faites pour présenter… ben, des tableaux, non ? Tableaux de chiffres, tableaux d'images, etc. plutôt que pour servir d'artifice de présentation (c'est un point de vue légèrement puriste, j'en suis conscient).

J'ai préféré enfermer ces trois liens dans un div, leur donner des classes, et jouer ensuite sur leur présentation côté CSS.

Voici le HTML :

 <div class="bandeau_liens">
 <a class="leprecedent" href="article-xxxx.html">Article précédent</a>
 <a class="lesuivant" href="article-yyyy.html">Article suivant</a>
 <a href="article-zzzz.html">Premier article</a>
 </div>

Notez que le lien Premier article est écrit APRÈS les deux autres, alors qu'il s'affiche ENTRE eux. Cet illogisme apparent s'expliquera bientôt. Côté CSS, on trouve :

 .bandeau_liens {text-align:center; margin-bottom: 1em;font-style:italic;}
 .leprecedent {float:left;}
 .lesuivant {float:right;}

… qui ne contient rien de surprenant. Pour comprendre l'illogisme de tout à l'heure, il faut se mettre à la place du navigateur et lire le HTML avec lui, dans l'ordre :

début du div. Le CSS ne dit rien sur ses dimensions, donc il est aussi large que l'article ;
arrive le lien article précédent . Il est flotté à gauche, donc zou ! contre le bord gauche du div ;
arrive le lien article suivant . Il est flotté à droite, donc zou ! contre le bord droit du div ;
arrive pour finir le lien premier article qui forme le reste du bandeau. Pas de flottage ni de clear, donc il s'écrit dans la place restée libre entre les deux flottants. Le bandeau est en text-align:center, donc le lien va au centre de cette place restée libre. Notez que ce n'est pas forcément l'axe de l'article. Pour être sûr de se trouver dans cet axe, il faudrait donner aux deux liens flottés la même largeur. Sincèrement, j'ai eu la flemme.

Quand ça semble mystérieux, mettez-vous à la place du navigateur : une boîte après l'autre, et on ne revient pas sur ce qui est déjà fait.

Règle anti-arrachage de cheveux : on conçoit la mise en page d'une zone (et on écrit son HTML) en commençant par les flottants. Le reste se débrouillera avec la place restante.

En lisant le code source de cet article, vous verrez ces trois pavés écrits avant le texte de gauche : c'est lui, le reste .

Et si on avait écrit un HTML logique , avec le lien premier article entre les deux autres ? Reprenez la séquence, et vous verrez que :

le lien article précédent glisse contre le bord gauche – normal ;
le lien premier article s'écrit au centre de la place laissée libre par ce flottant ET PAR LUI SEUL puisque l'autre n'est pas encore arrivé ;
le lien article suivant arrive, trouve la ligne complètement remplie et va donc glisser contre le bord droit DE LA LIGNE SUIVANTE.

Surprenant, mais ce n'est que l'application de la règle du jeu.

Un texte à gauche, un autre à droite - deuxième exemple

Celui-ci aussi est classique, il s'agit du bandeau de liens en bas de chaque article : commentaires, ajouter un comm, recommander . Depuis la V2 d'OverBlog, ce bandeau est configurable à votre guise. Ici, il comporte deux lignes : l'une pour le nom de l'auteur (à votre service), l'autre pour des liens de commentaires et recommandation. Le voici :

Pour que le lien recommander , et lui seul, soit rangé à droite, il y a cette ligne dans le CSS :

 .spanRecommend {float:right;}

Pour qu'il soit sur la même ligne que les deux autres (qui ne sont pas flottés) il faut qu'il apparaisse avant eux dans le HTML, c'est le même paradoxe apparent que tout à l'heure.

Les options de configuration du blog sont précisément faites pour intervenir sur le HTML. Dans l'admin du blog, la configuration du module articles se présente donc ainsi :

Finalement, quand on a compris le truc, c'est très facile.

Dernier exemple : un peu tout à la fois dans un article

Il s'agit de ce très bon article (faut pas se priver !), ouvrez-le donc dans une autre fenêtre pour vous rendre compte.

Vous y êtes ? Pour commencer, deux photos à droite du texte. En dessous de cet ensemble, un bandeau composé de deux photos côte à côte, et encore du texte pour terminer. On peut faire tout ça avec les classes fournies par OverBlog, il n'y a rien à ajouter au CSS. Voici l'essentiel du code source :

 <img src="image 1" class="DrteTexte" />
 <img src="image 2" class="DrteTexte clear" />
 <p>Le premier paragraphe</p>
 <p>Un autre paragraphe</p>
 <p>Et encore un</p>
 <br class="clear" />
 <div class="centreTexte">
 <img src="image 3" style="margin:1em" />
 <img src="image 4" style="margin:1em" />
 </div>
 <p>La fin de l'article.</p>

La classe clear, comme son nom l'indique, correspond à clear:both, la classe centreTexte à text-align:center. Remarquez les (petites) finesses suivantes dans le source :

les deux images flottées sont mentionnées avant le texte, comme c'était à prévoir ;
la deuxième image flottée porte DEUX noms de classe : DrteTexte pour être flottée à droite, clear pour être rangée en-dessous de la précédente plutôt qu'à côté ;
le texte se termine par un saut de ligne de classe clear, solution paresseuse et efficace pour 1 - arrêter de remplir la place laissée par les images flottées et 2 - garantir la présence d'une ligne vide après ces deux photos, dans le cas où le texte d'accompagnement ne serait pas assez long ;
les photos 3 et 4 sont dans un div à texte centré, je leur ai mis un peu de marge pour laisser de l'air entre elles ;
et voilà tout.

Alors, contents ? Cette fois, je vous ai dit tout ce que je savais sur les flottants.

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

Flottants : la théorie Dimensions et débordement Premier article