L’exercice complet se trouve à cette adresse :
https://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 :
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.
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