Tant qu'à faire, je propose également mon correctif :
Pour rappel, il fallait réaliser ceci :
Avec les contraintes suivantes :
a écrit :
Vous avez droit à 5 conteneurs neutres (div) au maximum (n'oubliez pas il y a un footer 
). Vous avez droit à 7 ids d'objets différentes, les classes ne sont pas autorisées. Le code html et le CSS doivent être le plus propres possibles et bien sur Valides.
Bon, laissons un peu de côté les contraintes. Plutôt que de compter les divs, les identifiants, ce genre de chose, on s'intéressera aux objectifs poursuivis. Car comme le dit Léo Ferré :
Léo Ferré, Préface, in Il n'y a plus rien a écrit :
Les écrivains qui ont recours à leurs doigts pour savoir s'ils ont leur compte de pieds, ne sont pas des poètes, ce sont des dactylographes.
J'ai réalisé plusieurs essais pour cet exercice. Deux sont relativement satisfaisants, et répondent à des objectifs différents. Dans les deux cas, j'ai tenté de produire une solution aussi accessible que possible, en pensant en particulier à la fluidité du texte (en volume et en taille).
Je passe rapidement sur la mise en forme des blocs principaux (deux colonnes de contenu, pied de page). On notera juste que j'ai englobé les deux colonnes de contenu par un conteneur global, div#global (qui ne comprend donc pas le pied de page, contrairement à la solution présentée par Aymeric), pour deux raisons :
- cela permet d'éviter le
dépassement des éléments flottants grâce un contexte de formatage via la propriété
overflow ;
- cela permet également d'utiliser une image de fond pour simuler des colonnes de même hauteur (technique des
colonnes factices).
Objectif prioritaire : adaptation parfaite du texte
Le seul moyen d'obtenir une adaptation parfaite du texte
des deux colonnes par rapport à l'encart central, c'était d'avoir dans chaque colonne un bloc flottant ayant pile la hauteur de l'encart. Un de ces blocs pourra être l'encart, mais l'autre devra être un bloc de mise en forme.
Le problème, c'est que l'on ne peut pas tout à fait prévoir la taille de l'encart : soit que l'on ne sache pas quelle sera le volume de contenu (dans un CMS par exemple) inséré, soit que l'on ne sache pas quelle sera la taille du texte chez l'utilisateur.
Je place donc mon encart flottant au début de la colonne de droite. Dans la colonne de gauche, je place également un bloc flottant, que je cache via un
visibility: hidden. Pour être sûr que ce bloc invisible (mais actif et repoussant le contenu dans la colonne de gauche) ait la bonne hauteur, je suis obligé de dupliquer à l'identique le contenu de l'encart.
Et voilà le résultat :
http://web.covertprestige.info/divers/ajblog/exo1b.html
Point fort : adaptation parfaite du texte à gauche comme à droite.
Point faible : contenu dupliqué, visible si on désactive les CSS, visible avec un navigateur textuel comme Lynx, ou encore accessible (en double, donc) avec certains lecteurs d'écrans. Note : une partie des lecteurs d'écran interprète
visibility:hidden, et ne rendra pas le contenu dupliqué, ce qui limite les dégats.
Objectif prioritaire : pas de contenu dupliqué, maitrise de la place des éléments dans le flux HTML
Dans une démarche d'accessibilité un peu exigeante, on évitera :
- les contenus dupliqués (qu'ils soient visibles par tout ou partie des utilisateurs) ;
- les contenus dont la place dans le flux HTML (c'est à dire, pour au moins une partie des utilisateurs, la place dans le discours) est dictée par la mise en page.
Pour répondre à la première contrainte, on évitera la duplication du texte de l'encart, et on utilisera plutôt des éléments flottants vides pour créer les retraits. Ce qui impose d'avoir un encart de hauteur fixe, en pixels ou (mieux en l'occurrence) en EM. Avec une hauteur en EM, la taille du bloc d'encart et celle des « cales » placées dans chaque colonne suivra en partie l'agrandissement du texte. Mais pas tout à fait : en agrandissant le texte (ou avec une taille de texte par défaut plus importante) on gagne aussi en nombre de lignes, et le texte dépasse. Dans ce cas, la solution qui me semble la plus accessible est de forcer l'apparition d'une barre de défilement interne avec
overflow: auto.
Pour répondre à la deuxième contrainte, et vu que l'encart aura une hauteur fixée en EM, on se contentera de positionner l'encart en absolu, le texte étant repoussé par deux « cales » flottantes et invisibles, une par colonne. On peut alors placer le texte de l'encart où l'on voudra dans div#global (lui-même positionné en relatif pour servir de référent au positionnement absolu) : au début, à la fin, ou encore entre les deux colonnes.
Le résultat :
http://web.covertprestige.info/divers/ajblog/exo1d.html
Point fort : pas de contenu dupliqué, encart que l'on peut placer où l'on veut.
Point faible : apparition d'une barre de défilement si on agrandit beaucoup le texte, ou encore si on a plus de texte que prévu.
Modifié par Florent V. (24 Jan 2007 - 16:57)
