Rappel des directives :

Un bloc de texte chevauchant deux colonnes

• Objectif : à la fin de cet exercice, vous serez capables de créer un bloc de texte chevauchant deux colonnes également remplies de texte.
• Niveau de difficulté : moyen
• Difficulté détectée : il faut que le texte des deux colonnes principales « habille » le bloc les chevauchants (voir visuel joint). Il faut de plus que le rendu soit le même (à peu près) quel que soit le navigateur (récent, c’est à dire à partir de IE6 ;) ).
• Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement est un plus (des sources sont fournies en bas de page).
• Matériel nécessaire : un simple éditeur de texte peut suffire
• Informations complémentaires : 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.

Il faut bien l’avouer, tout le monde a pris des libertés avec les directives, mais bon, rien n’est figé, surtout si le rendu final est à la hauteur.

Les réponses :

Je vais commencer par apporter ma propre réponse au problème, puis nous analyserons les autres réponses proposées.

Réponse AJblog

Les fichiers :

• Le fichier html
• Le fichier CSS

Explications :

Structure HTML

Comme vous pouvez le voir, il y a trois fois le même paragraphe, celui sensé représenter le texte « chevauché ». C’est le grand problème de cette version, nous avons un contenu dupliqué. C’est la seule possibilité, sans faire appel à des images, pour avoir :

• Des blocs qui s’agrandissent exactement de la même façon avec les tailles de police
• Un fond sous le bloc de texte qui soit uniforme

Ces deux conditions réunies. On peut tout à fait obtenir l’une ou l’autre sans faire appel à du contenu dupliqué.

Car, sous IE, les fonds ne « sortent » pas des blocs parents quand on fait appel au positionnement en float pour un bloc enfant, ils ne s’affichent que dans la limite du bloc parent.

C’est pour cela que nous avons un bloc qui vient se positionner en absolu « au dessus » du contenu.

La feuille de style

Je vais reprendre les éléments clé un par un :

• #general : on utilise la position « relative » pour permettre au conteneur enfant #central de se positionner en absolu par rapport à son conteneur parent. Si vous n’utilisez pas la position « relative » pour le conteneur parent, le conteneur enfant se positionne en absolu par rapport à la page.
• #gauche et #droite : pas grand chose à noter
• #central : c’est le bloc que l’on voit, il est positionné en absolu ce qui pose problème pour l’adaptation de ce code à un design « fluide ».
• #debordgauche et #deborddroite : ils sont invisibles « visibility:hidden » pour ne pas créer de problèmes si des décalages apparaissent lors de l’agrandissement de polices. De plus, avec certains agents utilisateurs, le contenu en « invisible » est ignoré, ce qui permet de limiter l’effet de contenu dupliqué. Les deux conteneurs sont déplacés hors de leur conteneur parent par l’usage d’une marge négative (-140px).

Certains chiffres, soit de marge soit de positionnement peuvent vous sembler étranges, ou imprécis, mais je les ai choisi pour optimiser la compatibilité entre les différents rendus des navigateurs.

Ce n’est pas une solution parfaite, loin de là, mais je pense le rendu et la construction au final assez propre. Du moins dans les limites des bidouilles que ce genre d’exercice force à réaliser.

Quand on essaie de faire faire quelque chose à un outil qui n’a pas été pensé pour ça, on est obligé de faire appel à des « tricks à un moment ou à un autre.

Réponse 20cent :

Site internet : http://20cent.net/

Les fichiers :

• Le fichier html
• Le fichier CSS

Explications :

En attente d’explications de 20cent. Si il veut bien.

Réponse Florent V :

Site internet : http://www.covertprestige.info/

Les fichiers :

• Le fichier html
• La feuille de style se trouve dans le fichier html

Explications :

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).

Réponse 1 : 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.

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.

Réponse 2 : 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.

Au final

L’usage des CSS permet de faire beaucoup de choses, les spécifications en attente faciliteront ce genre d’exercices avec par exemple la possibilité de gérer du texte en multi colonnes dans un même conteneur. Mais en attendant, je crois que nous sommes obligés de faire appel à des petites bidouilles.

En tous cas, j’espère que ce petit exercice vous a plu et fait travailler, je vais essayer de vous en préparer un autre rapidement.

Si vous désirez des explications supplémentaires, n’hésitez pas à demander.

Pour rappel, Florent avait posté le problème sur le forum Alsacréations, vous y trouverez d’autres solutions de réponses : Forum Alsacréations.