css4design

L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un oeil sur la page d’accueil et de moderniser le gabarit HTML (L’intégration du gabarit en live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne).

La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple pour la colonne de gauche on peut lire : <div class=”bloc” style=”width: 145px;”><div class=”titre_bloc”> Dernières images </div><div style=”max-width: 135px;” class=”cadrimage”>… On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro

Dis papa, racontes-moi encore les tableaux !

Si vous avez l’habitude d’utiliser les CSS pour la conception de vos design web, vous n’aurez pas besoin d’approfondir le code d’origine et vous pourrez vous lancer bille en tête sur votre Dreamweaver Notepad préféré pour traduire en CSS cette mise en pages en tableau

Mais comme ce qui va sans dire va mieux en le disant, je vous donne un bref aperçu de ce que l’on peut y trouver. La page contient huit tableaux, dont trois pour délimiter les zones principales :

1. l’en-tête, qui contient :
• une bannière en image,
• et le menu principal.
2. le contenu, qui engloble les deux colonnes contient :
• une colonne étroite pour le menu secondaire et d’autres informations,
• et le contenu principal.
3. et le pied de page.

La zone de contenu est elle-même délimitée par deux td : un pour la colonne de gauche et un pour le contenu à droite.

Le premier td est composé d’une première partie div#ex1 pour le menu, suivi de div.bloc contenant plusieurs balises table pour la météo, et d’un autre div.bloc pour l’affichage des images en bas de la colonne. Si je garde la météo sous forme de tableaux (pas la peine de jeter le bébé avec l’eau du bain), je supprimerai tous les styles en ligne pour les placer dans styles.css.

Le deuxième td est dédié au contenu principal où l’on trouve quatre blocs d’information :

1. un message de bienvenue,
2. les dernières nouvelles de la vie de la base nautique,
3. les informations nécessaires pour se rendre sur les lieux,
4. et quelques liens utiles.

Maintenant que l’on y voit un peu plus clair dans ces tableaux, la structure de la mise en pages CSS s’impose d’elle-même :

1. Une div#container englobera l’ensemble de la page,
2. une div#header pour la bannière et le menu,
3. deux div#main et div#sidebar pour définir les deux colonnes de contenu,
4. et un div#footer pour terminer.

Comment j’ai organisé mes feuilles de style CSS

J’ai créé une feuille de style principale styles.css pour la présentation, une autre pour la structure globale layout.css et une dernière layout-right.css pour permuter rapidement la sidebar sur la droite en supprimant les commentaires sur la règle /*@import “layout-right.css”;*/ du fichier styles.css. Les deux dernières sont importées dans l’ordre dans la première. Les plus perspicaces d’entre vous auront sans doute remarqué l’existence de layout-bg.css et de layout-bg-right.css dont je parlerai plus loin.

Comme d’habitude, une feuille de style accessible uniquement pour Internet Explorer via les commentaires conditionnels est mise en place. Pour le coup, elle ne sert pas à grand chose (une seule déclaration) et j’aurais certainement mieux fait de placer un petit hack de derrière les fagots… Mais la paresse est mauvaise conseillère. Et puis c’est comme la ceinture de sécurité qu’il faut mettre même pour les trajets les plus courts Je ne m’attarde pas sur styles.css, sinon pour préciser que cette feuille de style importe les autres.

Le fichier layout.css définit la structure de la page

 /* layout.css */ body, html { 	margin: 0; 	padding: 0; } body * { 	margin: 0; 	padding: 0; } #container { 	position: relative; 	width: 817px; 	margin: 0 auto; 	text-align: left; 	border: 1px solid #0E419A; 	background-color: #2677B9; } #header { 	width: 817px; 	height: 154px; 	background: url(images/bandeau.jpg) no-repeat; } #main { 	text-align: justify; 	line-height: 1.75em; 	width: 620px; 	min-height: 1034px; 	float: right; 	padding: 1em; 	background-color: #D1D9EC; 	background: url(images/fond_gros_bloc.jpg); } #footer { 	background-color: #0E419A; 	clear: both; } #sidebar { 	width: 151px; 	float: left; }

Ici, l’essentiel (en gras) se trouve d’une part, dans le background-color: #2677B9; du #container qui donne en réalité la couleur de fond de la sidebar, et d’autre part, dans le min-height: 1034px; qui assure que la hauteur de #main ne sera pas inférieure à celle de la sidebar, auquel cas la couleur de fond du #container apparaîtrait sous #main. Evidemment, celà fonctionne parce que la hauteur de la sidebar est connue et qu’elle ne change pas dans les pages intérieures du site en question.

Quelques mots à propos des colonnes

Le traditionnel colonnage est assuré par le non moins traditionnel float: left; pour la sidebar et float: right; pour #main, accompagné respectivement par les valeurs width: 151px; et width: 620px;. Le fond de la zone principale est assuré par background: url(images/fond_gros_bloc.jpg);, mais on peut se contenter de background-color: #D1D9EC; qui reprend la couleur de body. Le footer voit quant à lui sa position stabilisée grâce à clear: both;.

layout-right.css : ma sidebar fait fait, c’qui lui plait plait plait

Concernant la structure globale, Il reste à gérer le déplacement de la sidebar sur la gauche ou sur la droite selon l’humeur du jour. Ce qui se réalise simplement avec la déclaration suivante :

 /* layout-right.css */ #main { 	float: left; }

layout-bg.css si la hauteur de la sidebar varie…

Dans ce cas, la méthode utilisée plus haut ne donne plus les résultats escomptés. Pour que les couleurs de la sidebar et de #main se calent sur le footer indépendamment de leurs contenus, j’utilise une image de fond de quelques pixels de hauteur et d’une largeur égale au #container. Soit une image de 817px de large pour 4px de haut qui se r…

Edit :je viens de m’apercevoir que ce billet a été tronqué : pour une raison encore inconnue, tout le billet s’est retrouvé encadré d’une section PCDATA qui a dans un premier temps masqué totalement l’article, mais qui a eu comme conséquence d’en faire disparaitre une partie. Je fais au mieux pour retrouver une sauvegarde.

Articles relatifs

• Trucs et astuces CSS (5)
• Quelques notes sur XHTML et CSS, au fil de l’eau… (8)
• Frameworks CSS + Reset CSS : design from scratch (15)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Vos positions s’affaissent ? Mettez le bottom à zéro… (3)