Correction d’exercice : une mise en page en deux colonnes sans conteneurs neutres

Rappel des directives de l’exercice :

Construire une mise en page en deux colonnes sans conteneurs neutres

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de construire une mise en page en deux colonnes, sans user de conteneurs neutres.
  • Niveau de difficulté : pas si simple
  • Difficulté détectée : Différents problèmes de rendus en fonction des navigateurs.
  • 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 suffit.
  • Informations complémentaires : Voir l’image ci-dessous, il faut de plus que le design soit « fluide » (qu’il s’adapte à la résolution de l’écran) et que la construction résiste à au moins trois agrandissements de tailles de polices sous Firefox et à la taille maximal des polices sous IE. Votre code doit bien sur être conforme aux spécifications W3C tant pour le HTML que pour le CSS. Toutes les balises (X)HTML sont autorisées sauf balises « neutres » (comme ça par exemple, pas de <div></div> hein…).

Lire la suite pour la correction complète.

L’exercice complet se trouve à cette adresse :
http://www.ajblog.fr/exercice-css-une-mise-en-page-en-deux-colonnes-sans-conteneurs-neutres

Quelques petits ajouts et corrections sur ce qui a été dit initialement

Le but de cet exercice est de vous familiariser avec les comportements CSS de positionnement pour chaque conteneur html.

En effet, un grand nombre d’exemple de mises en page font un fort usage de ce que j’ai appelé ici les conteneurs neutre et que l’on pourrait appeler plus logiquement le balisage de division (<div></div>.

Ces balises ne devraient être utilisées que pour « diviser » votre page en grands groupes d’information, mais pour des raisons de facilité on a souvent tendance à en abuser.

Pour revenir sur ce qui a été dit dans les commentaires de l’exercice initial, oui il faut utiliser des balises <div>, et oui il est bon de commencer à étudier les comportements de positionnement via CSS sans en utiliser.

Voici un exemple concret :

Je veux, quelque par dans ma page avec deux petites colonnes de contenu, chacune comportant un titre et chacune comportant un ou plusieurs paragraphes.

La solution de facilité serait la suivante :

deux colonnes formées par deux blocs conteneurs div

Nous avons un bloc de division logique, car il va créer la « division » de la page pour les contenus concernés.

Ensuite, pour se faciliter la vie, nous créons deux autres « divisions » pour pouvoir caser notre contenu facilement. Même si l’idée de sous « division » peut se comprendre, ces blocs conteneurs ne sont absolument pas nécessaires.

On peut tout à fait se passer de ces deux conteneurs en utilisant les mêmes classes de positionnement pour chaque élément de la colonne.

deux colonnes obtenues uniquement avec des classes CSS sur les contenus

Ce deuxième exemple illustre assez bien ce que nous avons voulu rendre dans cette exercice.

Pour être tout à fait honnête, la deuxième solution à plus une valeur didactique que de production.

Si vous voulez le code le plus « propre » possible et que vous avez la main totale sur votre contenu, optez pour la méthode des classes appliquées par contenu, par contre, si vous êtes dans une logique de production, par exemple un site pour un client ou le contenu est généré via une interface d’édition par backoffice, optez pour la solutions des divisions supplémentaires, autrement, préparez vous à un bon casse tête.

Correction de l’exercice

Je ne vais pas m’étendre plus sur l’utilité de l’exercice, si vous avez lu attentivement ce que j’ai dit ci-dessus, vous aurez compris.

En guise de correction, je vais vous mettre les URls des fichiers créés par les personnes ayant participé à l’exercice.

Leurs réponses sont propres, correctes, précises et globalement plus lisibles que celle que j’avais prévu initialement.

Si il y a des choses que vous ne comprenez pas ou si vous avez besoin d’un complément d’informations, n’hésitez pas à poser vos questions dans les commentaires.

La réponse de 20cent :
http://20cent.net/docs/divers/exercice2.html

La réponse de clb56 :
http://www.clb56.fr/test_css/aj_css_exercice2/index2.html

La réponse de Florent V :
http://web.covertprestige.info/divers/ajblog/exo2a.html

Cordialement,
Aymeric Jacquet

Be Sociable, Share!

Articles similaires

    None Found