Mise en page CSS [en]

Si l’ami dekal pensait s’en tirer à  si bon compte 😉 pour balayer les mises en page CSS d’un revers de la main, c’était compter sans tout l’amour que je lui porte. J’ai en effet passé 25 terribles minutes à  bidouiller un peu son code pour que la page s’affiche correctement.

Les vingt premières minutes furent consacrées à  faire valider le HTML de la page. Du point de vue de la personne qui n’est pas branchée standards, cette étape n’est pas absolument nécessaire pour que la page « s’affiche correctement » dans un certain nombre de navigateurs. Je n’en fais cependant jamais l’économie, ayant passé de longues heures à  tenter de résoudre des « problèmes de CSS » qui étaient en fait des problèmes de HTML mal structuré.

Une fois le HTML corrigé, les problèmes d’affichage persistaient. Le problème le plus gênant était le débordement du texte sur la « barre de menu » de droite. Un autre, que je n’avais pas compris au premier coup d’oeil, était que l’image de fond pour le contenu occupait une toute petite portion de l’espace en haut de la page, au lieu de la remplir presque entièrement.

Les cinq dernières minutes de mon labeur acharné se passèrent donc dans la feuille de style. Une malencontreuse propriété height fut supprimée dans la définition de #blog, et comme par magie, l’image de fond se décida à  occuper la place qui lui était destinée. Restait le problème de la largeur du texte. Comme j’en avais eu l’intuition, il était dû à  une mauvaise interprétation du modèle de boîtes.

J’en profite pour insister sur un point fondamental concernant ce que j’appelle le modèle de boîtes : la largeur visible de l’élément n’est pas égale à  la valeur de la propriété width. Je sais, ce n’est pas forcément ce qu’il y a de plus logique, mais c’est comme ça. Si on ne comprend pas bien ce point, on ne parviendra jamais à  faire des mises en page CSS qui tiennent la route. La largeur visible de l’élément est la somme des valeurs des propriétés width, border, et padding. (Je vous laisse transposer cette règle pour la hauteur.)

Un exemple vaut mieux que mille explications : dekal voulait que la largeur de sa zone texte soit égale à  411px. Pour trouver quelle valeur donner à  la propriété width, il faut soustraire à  notre largeur visible les largeurs de border et de padding. Dans ce cas-ci : 411px – 2px (deux fois 1px de bordure) – 60px (55px de padding-right et 5px de padding-left) = 349px pour la propriété width.

Avec un peu d’habitude et d’entraînement, cela devient tout aussi facile que des tableaux ! (Comme j’aime à  le répéter, une des choses qui rend les tableaux beaucoup plus faciles que les CSS, c’est justement que l’on sait déjà  utiliser les tableaux, et pas encore les CSS…)

Si tout ceci vous interpelle (on peut rêver !), allez vous promener un peu du côté de Pompage.net — en particulier :

• Envoyons paître les mauvais navigateurs (plus que ça, une introduction à  la mise en page CSS !)
• Techniques et astuces pratiques pour une mise en page CSS
• Faites bonne impression avec les CSS

Bonne lecture, et à  votre disposition bien entendu si vous avez des questions ou des problèmes pratiques sur le sujet !

Mise à  jour: comme je suis vraiment gentille, j’ai rajouté le bidouillage dans la feuille de style pour que la mise en page passe aussi sous IE Windows.

Similar Posts:

• Pense-bête [en] (2003)
• Pollens Pédagogiques 2011 [en] (2011)
• Tableaux ou non? [en] (2001)
• Facebook Page Like Buttons: Quick and Dirty [en] (2010)
• Web design : la vie, c'est le changement [en] (2003)
• Ecrire en 2D [en] (2009)
• Quelques balises HTML pour blogueurs [en] (2006)
• CSS: regardez-moi ces <div>! [en] (2002)
• Multilingue! [en] (2002)
• Journée GRI: Web 2.0, remise en contexte [en] (2010)