Le menu horizontal sous la barre de titre de mes pages est constitué de
deux blocs <div> flottants. À gauche, il n'y a qu'un seul lien
Accueil, à droite le bloc contient les autres liens À
propos, Programmation et ainsi de suite. L'alignement
vertical de l'élément suivant (une boîte de recherche, une date, ou un
paragraphe, selon le cas) était délicat et ma solution était des pires
possibles. Il était temps de revoir cette question. Encore une fois,
plusieurs ont déjà trouvé de bonnes solutions.
Table des matières
- L'énoncé du problème
- La solution <br... de W3C
- La solution
clearfix - Lessons Learned Concerning the Clearfix CSS Hack
- Jeff Starr, 5 février 2008, révision 15 janvier 2017.
- Clearing Floats: Why is it Necessary Even in “Modern” Browsers?
- Louis Lazaris, 23 octobre2012.
- Utiliser la class clearfix
- Renaud Anney, 16 août 2012
- How To Clear Floats Without Structural Markup
- Big John le 14 mai 2004 révision 2 juillet 2008
- Simple Clearing of Floats
- Alex Walker, 26 févier 2005
- Tout était prévu :
overflow - Le nouveau
clearfixmoderne - Conclusion
Voici une situation problématique que l'on rencontre souvent. En premier, il y a un bloc conteneur de type <div> qui occupera 90% de la largeur totale et qui sera centrée. Entre les balises définissant ce conteneur il y a un paragraphe affichant une date alignée au centre et deux autres zones <div> contenant du texte, l'une qui flotte à gauche et l'autre à droite. Enfin, la zone conteneur est suivie d'un paragraphe affichant une seconde date alignée sur la marge droite.
Où sera situé la seconde date ? Probablement pas où l'on voudrait comme on peut voir ci-dessous.
date: 2018-02-03
date: 2018-02-04
Parce qu'elles sont des zones flottants, les deux zones de texte ne sont pas contenues graphiquement dans la zone conteneur même si elles sont comprises entre les balises <div> et </div> de la zone conteneur. Le contour vert montre que la taille verticale de la zone conteneur ne tient compte que de la première date. Donc le fureteur place la seconde date sous cette zone, mais sans que son texte empiète sur les zones flottantes. Par contre, le cadre autour du paragraphe qui occupe toute la largeur de son contenant est par dessus les zones flottantes.
J'essayais de régler le problème en fixant la taille verticale de la zone conteneur. Cette méthode est franchement mauvaise. Il suffit de réduire la taille horizontale de la fenêtre du fureteur pour que les deux zones de texte flottantes occupent un espace vertical croissant qui pouvait éventuellement dépasser la taille verticale fixe de la zone conteneur.
Le World Wide Web Consortium (W3C) aurait suggéré
d'ajouter une balise <br> avec le style clear:both avant
le paragraphe contenant la seconde date.
Au moins, la seconde date est située sous les zones de texte flottantes qu'importe leur hauteur alors qu'on modifie la largeur de la fenêtre du fureteur.
date: 2018-02-03
date: 2018-02-04
Cette solution n'est pas parfaite. Par exemple, le cadre dessiné autour du conteneur initial n'englobe pas les deux zones flottantes. De plus il faut ajouter un élément structurant la présentation visuel au texte HTML. C'est quelque chose à éviter surtout depuis l'introduction des styles CSS.
On peut remplacer <br style="clear:both"> avec un
<div> qui a le même attribut clear et qui occupe la pleine
largeur de son contenant, mais qui n'a aucune dimension verticale.
On note que la bloc contient un espace insécable
mais qui est imprimé avec une police de hauteur 0. C'est une astuce pour
s'assurer que tous les navigateurs web tiennent compte de l'élément. Ceci
n'apporte rien de mieux à la solution proposée par le W3C, mais il permet de
mieux comprendre le style clearfix dont plusieurs variantes
existent depuis déjà des années. Parmi celles-ci, j'ai utilisé celle
de Jeff Starr proposée en 2005 et révisée en 2017 puisqu'elle était la plus
récente de celles que j'avais trouvées.
Le principe de fonctionnement est le suivant. Le bloc <div> contenant
les zones flottantes sera de classe clearfix. Cette classe
possède un pseudo élément after qui insère un contenu
après que le <div> ai été affiché. Et ce qui est inséré est sommes toutes
le <div> à dimension verticale nulle vue ci-dessus.
On peut voir que le <div> de classe clearfix ajuste
sa hauteur pour englober les zones flottantes.
date: 2018-02-03
date: 2018-02-04
Références:
En relisant les deux dernières références mentionnées ci-dessus,
il semble que la solution était anticipée par l'attribut CSS
overflow. Il suffit d'ajouter overflow:auto
au style du <div> parent.
Cela fonctionne et c'est simple. En revanche, c'est un peu difficile
à comprendre puisque le rôle de l'attribut overflow est de
gérer l'utilisation des barres de défilement quand le contenu d'un
bloc dépasse ses bornes. Il ne m'est pas clair pourquoi c'est la
taille du bloc est ajustée. En même temps, il n'est pas clair où il faudrait
ajouter une barre de défilement pour voir les zones flottantes déjà visibles.
date: 2018-02-06
date: 2018-02-04
L'avertissement suivant
«est lancé sur la page intitulé CSS Layout - float and clear de w3schools. On trouvera une discussion plus poussée sur les problèmes qui peuvent se présenter avec cette approche dans Clearing floats de Peter-Paul Koch (mars 2005).overflow:autofonctionne bien tant que l'on contrôle les marges extérieures et intérieures (sinon des barres de défilement pourraient apparaître) »
- traduction libre de
« The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars) ».
Ce dernier proposait l'élément CSS suivant.
J'avais de la difficulté à comprendre overflow:auto,
overflow:hidden n'a pas plus de sens et peut-être même moins.
Notez que l'attribut width pourrait être remplacé par un
attribut height dont la valeur souvent vue est 1px
ou 1%. Il n'est pas nécessaire de fixer la largeur à 100%,
d'ailleurs dans l'exemple, la largeur de la zone est 90% de celle de son
contenant.
La solution que w3schools propose elle-même est d'utiliser le pseudo élément suivant.
Puisqu'il n'est pas nécessaire d'inclure un attribut quelconque dans le
style clearfix, alors ce dernier n'a pas besoin d'être défini;
le pseudo-élément suffit. En revanche, on utilisera toujours
class="clearfix" dans le fichier HTML.
On notera le double deux-points pour indiquer le pseudo-élément. Il semble que c'est un changement récent de la syntaxe.
J'ai vérifié toutes ces solutions à l'aide de la page test.html. Elles fonctionnent toutes pour ce qui est du petit problème d'alignement que j'ai présenté ici, qui correspond à ce que j'utilise sur le présent site.
Pour être plus précis, j'ai examiné la page avec des versions récentes des principaux navigateurs sur les systèmes d'exploitation les plus courants.
| Navigateur | Système |
|---|---|
| Firefox | Windows 10, Ubuntu 17.1, Android 6 |
| Chromium | Ubuntu 17.1 |
| Chrome | Android 6 |
| Edge | Windows 10 |
| Internet Explorer | Windows 10 |
| Safari | OSX, IOS |
Bien sûr, il y a d'autres navigateurs et d'autres systèmes d'exploitation. Il y a aussi les version antérieures des navigateurs; les plus anciennes ne se conformaient pas entièrement aux standards W3C. Toutefois, est-ce bien nécessaire de s'assurer la compatibilité avec Firefox 3.5 ? Surtout sur un site comme celui-ci?
J'ai décidé d'utiliser le clearfix de
w3schools parce qu'en principe toutes les
recommandations qu'on retrouve sur ce site ont été vérifiées avec plusieurs
navigateurs dont certains que je ne possède pas.
Qu'importe la solution choisie, il me semble préférable de procéder
à l'aide d'un style qu'on pourrait appeler clearfix ou autre
chose. J'ai lu quelque part qu'on prépare un attribut CSS
pour régler ce problème de façon explicite. Si l'on a dispersé des
overflow:xxxx dans plusieurs autres styles, il pourrait être
plus difficile de passer au nouvel attribut en temps et lieu.