Aymeric Jacquet, Me, Myself and I…

Exercice CSS : un bloc de texte chevauchant deux colonnes

En fait, c’est un peu plus compliqué que ce que le titre indique. ;)

J’inaugure par cet exercice une série de billets présentant des cas « pratiques » d’application des CSS à une structure html.

Je fais plein de tests dans mon coin, sur des comportements, des rendus, des compatibilités et j’ai décidé d’en publier sur l’AJblog, mais sous la forme d’exercice.

Par contre, ne vous attendez pas à des tutoriels tous faits ou de simples pages de code commentées. Je laisse ça à d’autres qui font ça très bien.

Voyez ça plutôt comme des articles d’auto formation.

Un corrigé sera bien sur fourni à la suite, soit le mien, soit celui d’un visiteur si la technique appliquée est plus propre, plus simple, mieux en clair. Je n’ai pas la prétention d’être un « gourou ».

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.

L’exemple en image :

Un joli bloc de texte habillé pour l'hiver

Si vous avez besoin d’informations complémentaire, n’hésitez pas à en demander.

Précisez dans les commentaires si vous avez fini l’exercice en mettant un lien vers la page, ou si vous n’avez pas d’hébergement, envoyez moi vos fichiers je les hébergerai.

Les sources :

EDIT : Pour vous permettre de pouvoir donner l’URL de vos fichiers, j’ai temporairement désactivé l’antispam sur .htm et .html (bilan : 2 spams de commentaires dans la nuit).

Bon exercice.

Les réponses actuelles :

  • 20cent : 20cent.net/docs/divers/ex…
  • Florent V. : web.covertprestige.info/d…

Merci à vous de participer.

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

Aymeric Jacquet

, ,

25 réponses à “Exercice CSS : un bloc de texte chevauchant deux colonnes”

  2. Hmm… après une bonne heure dessus à essayer des trucs un peu au pif (oui je sais, c’est pas vraiment la meilleure méthode !), je suis toujours bloqué sur des chevauchements de texte. Dès le début, je savais que c’était le seul point qui allait me donner du fil à retordre (le reste étant très gentil globalement).

    Rassure-moi : la solution à trouver est bien censée être adaptable quel que soit le contenu des deux colonnes ou la longueur de l’encart central ? Parce que s’il s’agit de bricoler une page qui marche pour un contenu donné et pour la taille de texte « standard » non agrandie ou réduite, je peine depuis 40 minutes pour rien.

    Mais je suppose que tu as une vraie solution et pas simplement quelque chose d’aussi bêtement inadaptable et peu robuste ?

  5. Hé ben, faut pas mettre des URL dans ses messages sur ce blog… déjà deux qui me passent à la trappe. :(

  6. @Dadoo : c’est le but. ;)

    @Florent : pour l’instant la "seule" obligation c’est que le "bloc" ne peut se positionner qu’au début ou fin des colonnes. Mais je crois que je viens d’avoir une idée qui solutionne ce problème. :)

    Attention, je ne dis pas qu’il faut que votre code soit dans la parfaite logique sémantique, on peut quand même se permettre des écarts.

  8. Ah oui j’ai oublié de préciser ce petit truc de mon spamplemousse, j’ai collé .html en mot spam. Bizarrement, j’ai presque plus de spam qui passe. :)

    Bon je viens de libérer tes commentaires de l’odieux et despotique Antispam.

    Euhh pour Alsacreations, aucun problème, c’est un petit peu de la triche non? ;) D’un autre côté, en formation on conseille toujours aux stagiaires de chercher l’info ou elle peut se trouver.

  9. Une petite piste : un des habitués du blog m’a contacté pour me dire qu’il allait travailler à partir d’un modèle alistapart.com, ce qui est une bonne idée, c’est clair, mais la "grande difficulté" de cet exercice tient principalement dans les backgrounds et le modèle alistapart ne fonctionne qu’avec un background uni.

  10. Difficulté dans les background ? On parle du même exercice là ?…

    Enfin bref, je bute toujours sur l’habillage de l’encart. J’ai exploré la solution de 20cent, mais c’est justement le genre de petit bidouillage qui me semble peu intéressant… même si les hauteurs en EM donne l’illusion dans un premier temps lorsqu’on agrandit le texte (mais le texte de l’encart fout le camp, et on comprend qu’il y a anguille sous roche).

    Pour info, je me suis arrêté là :
    web.covertprestige.info/d…
    4 divs (même si j’aurais pu descendre à 3, avec un paragraphe pour l’encart… ah tiens, en fait on peut descendre à 2, maintenant que j’y pense), 5 identifiants (on peut descendre à 4).

  11. 20cent : checked, préviens moi dés que tu penses avoir fini.

    Florent : Checked, idem préviens moi dés que tu penses avoir fini.

    Pour autres précisions : comme je viens de le préciser à Alan sur Alsacreations, à partir du moment ou l’on essaie de créer un effet qui n’est pas prévu initialement avec les outils utilisés, on est obligé de faire appel à des trucs et astuces "borderline", certains plus "borderline" que d’autres.

    Tel que je te vois venir, tu seras surement déçu de la solution proposée. :D Espèce d’ayatollah. ;)

  12. Bon, je ne pensais pas continuer, mais j’ai eu une petite idée. Voici donc…
    – ma version non bidouillée (même page que précédemment) :
    web.covertprestige.info/d…
    – ma version avec grosse bidouille pas belle :
    web.covertprestige.info/d…

    J’ai laissé de côté les grosses bidouilles de l’article d’A List Apart (rien ne résistait au test suprême : l’augmentation de la taille du texte). J’ai donc pondu une version qui permet d’atteindre le graal, mais au pris d’un code HTML encore moins « sémantiquement correct » que tout ce que j’ai pu voir jusqu’ici.
    J’attends donc toujours la solution ultime. ;)

    Pour information : testé avec succès sur IE 6+7, FF 2, Opera 9 et Konqueror 3.5. Pas pu tester sous Safari, mais je pense que le rendu sera semblable à celui de Konqueror. Pour information : le seul à poser problème (hors IE6 et le bug des marges doublées pour les flottants) était Konqueror, qui a eu besoin d’un petit coup de z-index.

  14. Exercice intéressant, je vais essayer de m’y mettre !
    Juste un petit conseil de terminologie française, on dit pied de page et non ‘footer’.

  16. Allez, un de plus pour la route :
    web.covertprestige.info/d…
    En gros c’est la solution de 20cent/alistapart/etc., mais avec une petite subtilité pour une meilleure adaptabilité à l’agrandissement du texte. Note : Opera n’a pas l’air très fan, par contre, mais j’ai du mal à comprendre la gestion de la taille du texte par ce navigateur. ^_^;

  17. (Si je peux me permettre) le principal souci de ta solution Florent reste que l’article principal est coupé lors de sa lecture par celle de l’encart gris. Il n’y a pas de continuité.

  18. 20cent > Ça, ça dépendra du contenu. Les colonnes de gauche et de droite représentent-elles un contenu unique, ou deux contenus fortement liés ? Dans ce cas, on placera l’encart au début. Ou encore : si on veut utiliser deux éléments vides pour repousser le texte, et avec la solution du bloc d’encart en hauteur fixe (en EM), on pourra le mettre n’importe où et ensuite le positionner en absolu.

    Mais là ça va dépendre du contexte, du contenu, etc.

  19. Hop, avec du positionnement absolu :
    web.covertprestige.info/d…
    (4 div + un paragraphe pour le pied de page, 5 identifiants, une classe pour les éléments vide… la classe n’était pas du tout indispensable, mais je trouve ça plus propre).

  21. Si le « final » c’est maintenant, je dirais celle du positionnement absolu (exo1d).

    Elle est visuellement moins efficace, mais c’est le meilleur compromis accessibilité/design, avec la possibilité de placer l’encart où l’on veut dans le code (au début, au milieu, à la fin… suivant le type de lecture linéarisé dont on aura besoin).

  22. En passant : je pourrais la modifier pour avoir 0 classes et 7 identifiants, mais l’utilisation de classes me semble plus logique pour ce que j’ai fait, donc tant pis pour les règles. :D

  24. bon ben pour moi ça donne ça :
    mais si l’on change la taille de police, ben ça casse :(

  25. Bonjour ben, j’ai regardé ta page et ta feuille de style.
    En fait ton problème vient du fait que tu as donné une largeur en « em » à tes blocs de texte intérieurs et une taille en pixels à ton conteneur global.
    Du coup, quand tu agrandis la taille d’affichage des polices de caractere, cette unité de taille (les « em ») grandit proportionnellement, donc tes blocs deviennent trop grands poru rester l’un à côté de l’autre.
    Pour ce type de mise en page, il faut de préférence utiliser un taille de blocs en pixels, ou alors mettre une taille du conteneur global également en « em ».