Correction d’exercice : un bloc de texte chevauchant deux colonnes

Pour rappel l’exercice se trouve ici : un bloc de texte chevauchant deux colonnes

Pour le reste, cliquez sur le petit lien là en dessous : Lire la suite.

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.

Cordialement,
Aymeric Jacquet

Be Sociable, Share!

Articles similaires

    None Found

15 Commentaires pour Correction d’exercice : un bloc de texte chevauchant deux colonnes

  • Florent V.

    Tu as un problème avec le pied de page : la marge supérieure n’est pas prise en compte à cause du [i]clear[/i]. Il faut supprimer cette marge et rajouter une marge inférieure de 20px à #gauche et #droite (ou bien rajouter un hr invisible de 20px de haut pour faire le clear).

    Sinon, j’ai un peu de mal à comprendre l’opportunité d’avoir trois fois le contenu de l’encart. Que le contenu dupliqué soit indispensable à un rendu complètement adaptable, c’est une chose, mais pourquoi en triple ?

    Je crois que je préfère mes solutions (la B et la D) à la tienne. :)

    Le 24 janvier 2007 à 16 h 17 min

  • Florent V.

    Hop, mon explication pour mes deux solutions :
    forum.alsacreations.com/t…

    C’est un peu long, donc un lien sera peut-être le mieux.

    Le 24 janvier 2007 à 16 h 59 min

  • Avouons, je ne me suis pas trop foulé pour le pied de page. Effectivement la marge n’est plus active sous FF et Opera, ma mauvaise habitude de bosser surtout pour IE.

    Ta solution, effectivement plus propre, fait appel à un fond image pour "simuler" l’écart entre les conteneurs droite et gauche et l’overflow pour que le texte contenu puisse scroller quand il vient à dépasser les conteneurs "simulés". Tu n’as pas de réel fond s’adaptant totalement à ton design.

    Disons que ma solution se bornait à répondre à mes directives. ;)

    Le 24 janvier 2007 à 16 h 42 min

  • Je copie colle si ça te va.

    Le 24 janvier 2007 à 17 h 08 min

  • Un peu trop speed aujourd’hui pour une explication mais j’ai quand même eu le temps de noter la faute à mon pseudo. :þ

    Le 24 janvier 2007 à 17 h 15 min

  • Une faute, ou ça une faute? ;) Ok pas de problèmes 20cent, tu as tout ton temps.

    Le 24 janvier 2007 à 17 h 59 min

  • Florent V.

    Vi, ça me va. :)

    Le 24 janvier 2007 à 19 h 50 min

  • Je suis arrivé trop tard sur ce défi. Je tenterai avec plaisir le suivant ;-)

    Le 25 janvier 2007 à 1 h 53 min

  • Voici mes explications :

    Pour la réalisation de cette exercice, voici les différentes techniques employées :

    – Le concept de hasLayout (www.test.blog-and-blues.o…)
    – Les syntaxes de commentaires conditionnels (www.blog-and-blues.org/ar…)
    – Une solution aux problèmes de float fait surface (www.svay.com/blog/index/2…)
    – Les colonnes factices (http://www.pompage.net/pompe/col...)
    – Position Absolue (blog.alsacreations.com/20…)
    – Les unités de mesure en "ex" (fr.selfhtml.org/css/forma…)
    – Passage d’élément au contenu trop important (fr.selfhtml.org/css/propr…)

    Oui… je n’ai pas inventé grand chose au final ! ;)

    Le résultat obtenu ainsi offre :

    – une page sémantiquement correcte
    – une validation XHTML et CSS
    – un rendu identique sur la plupart des navigateurs modernes
    – une souplesse assez grande de le choix de la taille des caractères
    – un rendu sans feuille de style probant

    Mais nous le voyons, du fait du mauvais support CSS par Internet Explorer (essentiellement), il faut encore maintenant trop souvent, recourir à diverses techniques qui ne sont pas très naturelles (abus des positionnements flottants, hacks et autres bidouilles de mise en page).

    Le 25 janvier 2007 à 13 h 38 min

  • Oups, attention aux parenthèses !

    Le 25 janvier 2007 à 13 h 57 min

  • @20cent : merci pour les explications et les ressources, pas de problèmes pour les parenthèses, je corrige.

    @Vinch : pas de problèmes je suis en train d’en préparer un autre.

    Le 25 janvier 2007 à 13 h 59 min

  • Florent V.

    Tiens, des EX plutôt que des EM ? Il y a une raison particulière ou c’est juste pour changer un peu ?

    Au passage, j’évite pour ma part d’utiliser cette unité peu « fiable » car interprétée différemment par les navigateurs. Pour s’en rendre compte, on peut tester la page suivante avec IE, Opera, Firefox, etc. :
    web.covertprestige.info/t…
    (si je me souviens bien, Firefox et Konqueror interprètent EX en fonction des indices de hauteur d’x contenues dans la fonte – mais avec une précision très relative –, tandis qu’Internet Explorer et Opera décident unilatéralement que 1ex = 0.5em, quelle que soit la fonte).

    Le 25 janvier 2007 à 23 h 29 min

  • "Juste pour changer un peu"… euh, non, quand même pas. ;)

    Ça me semblait plus naturel ici (pour gérer la hauteur d’un bloc) d’utiliser comme unité quelque chose qui se réfère à la hauteur de la lettre et non à sa largeur.

    Mais je n’avais en effet fait que quelques tests rapides. Merci pour tes précisions.

    Le 26 janvier 2007 à 10 h 05 min

  • Florent V.

    20cent, EM se réfère à la hauteur de la lettre et non à sa largeur. EX se réfère, théoriquement, à la hauteur de l’œil de la lettre, dite aussi « hauteur d’x ». Pour un corps de texte identique en EM, la hauteur d’un EX peut varier suivant que la fonte à un œil de la lettre massif (par exemple : Verdana ou Georgia), ou un œil de la lettre réduit (par exemple : Times ou Times New Roman).

    Plus de précisions sur les EM :
    css.alsacreations.com/Tut…

    Le 26 janvier 2007 à 11 h 43 min

  • Kadus

    Salut,
    Je souhaite vous dire bravo pour ce super tuto et félicitation à Florent et 20cent pour avoir réussit.

    Personnellement, j’ai passé toute la soirée dessus et sans réussir. En fait, j’avais eut la naïveté de croire qu’en jouant sur les margin j’aurais pu réussir. Puis j’ai tenté la position absolu mais rien.

    En tout, c’est un super tuto, faudrait en faire plus :)

    Le 9 janvier 2009 à 2 h 41 min