HTML & CSS

Exercice de style CSS et HTML : table vs div

sivom-nautiqueL’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 œil sur la page d’accueil et de moderniser le gabarit HTML.

Note : L’intégration du gabarit 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 la colonne de gauche est composée de <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 englobe les deux colonnes; contient :
    • une colonne étroite pour le menu secondaire et 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. 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. 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. Comme la ceinture de sécurité, il faut mettre les commentaires conditionnels y compris pour les trajets les plus courts 😉 Je ne m’attarde pas sur styles.css, sinon pour préciser que cette feuille de style importe toutes les autres.

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

/* layout.css */

* { /* Plus d'information sur la remise à zéro des styles par défaut des balises HTML */
    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 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 apparaitrait 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 colonage 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épète en y. Cette image est composée d’une zone de 151px de large pour simuler la sidebar, et le reste rempli avec la couleur de #main, ici en vert clair pour les tests. Cette feuille de style ressemble beaucoup à layout.css à l’exception du background de #container et de la suppression de la propriété min-height: 1034px; qui ne sert plus à rien.

…layout-bg-right.css pour déplacer la sidebar comme on veut

Même avec un background en image, on peut se débrouiller pour placer cette sidebar à droite. Il suffit d’indiquer une rotation de la zone de travail de 180° dans Photoshop et d’enregistrer cette nouvelle image sous bgContainer-right.png, puis créer une nouvelle feuille de style layout-bg-right.css pour conserver un maximum de modularité :

/* layout-bg-right.css */

#container {
	background: url(images/bgContainer-right.png) repeat-y;
}
#main {
	float: left;
}

Si vous décidez d’utiliser layout-bg.css avec ou sans layout-bg-right.css, n’oubliez pas de supprimer la déclaration min-height: 1044px; dans la feuille de style pour Internet Explorer !

Comment bien utiliser toutes ces CSS

Le fichier styles.css contient des règles d’import pour quatre feuilles de style dont trois sont placées entre commentaires :

  1. @import « layout.css »;
  2. /*@import « layout-right.css »;*/
  3. /*@import « layout-bg.css »;*/
  4. /*@import « layout-bg-right.css »;*/

En l’état nous avons un gabarit CSS avec la sidebar sur la gauche et un contenu possédant une hauteur minimum qui correspond à la hauteur de la barre latérale. Pour placer cette sidebar sur la droite, il suffit d’ôter les commentaires de la ligne 2.

Si vous préférez utiliser les gabarits CSS avec l’image qui se répète en background et la barre latérale à gauche, enlevez les commentaires de la ligne 3, et remettez-en sur les lignes 1 et 2. Pour obtenir la même chose avec la sidebar à droite, décommentez la ligne 4 (les lignes 1 et 2 étant toujours entre commentaires).

Ca fait beaucoup de feuilles de style à gérer. Rappelez-vous qu’elles ne sont là que pour les besoins du tutorial, et qu’en production, vous n’aurez pas besoin de toutes les utiliser : vous saurez si oui ou non vous employez des couleurs de fond avec une image en background ou pas en fonction de vos exigences en matière de hauteur de colonnes ;)

Pour ne pas conclure trop vite

Tout n’est pas parfait, et j’aurais pu aller plus loin dans l’optimisation de la page. Surtout en ce qui concerne les images dont j’aurais pu diminuer le poids. Néanmoins le code HTML passe de 19 kb à 9 kb. Ce qui n’est pas négligeable si on extrapole l’utilisation du gabarit à l’ensemble du site, multiplié par le nombre de visiteur. On peut aussi considérer la clarté du code obtenu et donc envisager la maintenance du site avec plus de sérénité.

Par ailleurs, l’utilisation des CSS à permis de mieux gérer le positionnement des éléments pour obtenir un rendu plus harmonieux. La modularité apportée par la possibilité de changer d’avis pour placer la sidebar est un plus.

Il existe d’autres méthodes pour créer plusieurs colonnes en utilisant une position absolute ou relative par exemple. Outre la linkographie à la fin du billet, vous pouvez jeter un coup d’oeil sur le code source de cet exemple de positionnement d’un bloc en absolu (les vignettes) par rapport à un container en relative.

Rappel : voici mis côte-à-côte les liens vers la mise en pages en CSS et celle en tableaux.

P.S. : Cet exercice m’a également permis de prendre conscience de la foultitude de sites encore structurés avec des tableaux : il y a des cures d’enlightenment qui se perdent ;)

Linkographie :

A propos des tableaux vs CSS
http://pompage.net/pompe/tablevscss/
Traduction par Pompage de l’excellent article et travail de Sergio Villarreal
http://css.alsacreations.com/…
Construire un site sans tableaux
http://css.alsacreations.com/…
Réalisation d’un design complet (XHTML / CSS) en 5 étapes
Gabarit CSS en plusieurs colonnes
http://css.alsacreations.com/…
16 gabarits xhtml/css à tester sans modération ;)
http://www.fairytells.net/gabarit_accessible/…
Gabarit CSS accessible avec 3 colonnes dont la hauteur est indépendante du contenu grâce à javascript et projectseven.
http://webhost.bridgew.edu/etribou/layouts/
Nombreux gabarits en deux ou trois colonnes
Tutoriaux relatifs au positionnement
http://css.maxdesign.com.au/floatutorial/
the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
http://openweb.eu.org/articles/initiation_flux/
Initiation au positionnement en 3 parties : flux et position relative, position float et position absolue et fixe
Quelques CMS
http://www.spip.net/fr
SPIP : d’après Framasoft, il s’agit de l’une des plus grandes réussites logicielles issues de la sphère francophone libre
http://www.framasoft.net/rubrique168.html
Sur cette page, 39 systèmes de publication de contenu passé au crible. Lecture indispensable avant de choisir son CMS (ou pour savoir si vous avez fait le bon choix ;)
Publié le par Bruno Bichet