Créez un design extensible en CSS pour votre site Web
Les feuilles de style sont aujourd’hui répandues dans tous les sites Web dignes de ce nom, mais leur utilisation peut vite tourner au cauchemar pour le développeur débutant. En effet, qui ne s’est pas déjà arraché les cheveux en découvrant que son design réglé au poil sous Firefox a des allures de Guernica sous Internet Explorer ? Beaucoup de problématiques sont liées à la structure du site développé et ne peuvent être résolues qu’au coup par coup, mais on en trouve aussi des génériques comme :
Comment faire un design 3-tiers extensible, pas trop moche, et qui fonctionne sur tous les navigateurs courants ?
Dans ce billet je vous propose une solution que je trouve particulièrement flexible. Pour la démo, c’est ici que ça se passe !
Quelques explications
La structure de base est relativement classique avec un conteneur global, un header, trois panneaux (gauche, central et droit) et un footer :
<body> <div id="global"> <div id="header"></div> <div id="leftPanel"></div> <div id="rightPanel"></div> <div id="centerPanelWrapper"> <div id="centerPanel"></div> </div> <div id="footer"></div> </div> </body>
Les plus attentifs d’entre vous auront sûrement noté deux particularités avec :
- la présence de l’élément centerPanelWrapper,
- l’ordre d’enchaînement des trois panneaux (gauche droit puis central).
Passons donc aux choses sérieuses avec la création de la feuille de style CSS associée :
#global { width: 80%; min-width: 600px; margin: 20px auto; padding-bottom: 20px; } #header { height: 200px; margin: auto; background: transparent url('images/panorama.jpg') center no-repeat; overflow: hidden; } #leftPanel { float: left; margin: 1em 0 1em 1em; width: 25%; } #centerPanelWrapper { padding: 0 25%; } #centerPanel { margin: 1em 2em; } #rightPanel { float: right; margin: 1em 1em 1em 0; width: 25%; } #footer { clear: both; width: 100%; margin-top: 40px; }
Pour améliorer la lisibilité je n’ai gardé que les éléments principaux de la mise en page La feuille de style complète est bien entendu accessible en consultant le code source de l’exemple.
Pour bien comprendre la mise en oeuvre de ce design, je vous conseille, si ce n’est pas déjà fait, de vous documenter sur le positionnement CSS. L’astuce réside en effet dans la bonne maîtrise du flux HTML, et c’est précisément pour cela que le panneau droit est positionné avant le panneau central dans le code HTML.
L’élément centerPanelWrapper sert à cadrer le texte du panneau central, de façon à ce qu’il ne « s’étale » pas sous les panneaux droit ou gauche dans le cas ou l’un d’entre eux aurait une hauteur inférieure à celle du panneau central. Pour cela il suffit de lui appliquer un padding de dimension égale à la largeur des panneaux latéraux. Certains diront que l’on pouvait effectuer ce réglage directement sur l’élément centerPanel, ce qui est exact. Je ne rentrerai pas dans les détails mais je vous conseille quand même de procéder comme dans l’exemple car il vous sera plus facile de paramétrer le style du panneau central par la suite (aucun réglage supplémentaire ne doit se faire sur le wrapper).
La propriété overflow:hidden appliquée au header permet un affichage sympa à l’aide d’une photo panoramique. Je vous laisse redimensionner la fenêtre de l’exemple pour vous en rendre comtpe !
Pourquoi choisir ce modèle ?
Vous vous en doutez, ce design n’est pas l’unique solution au problème posé. C’est cependant celui que je préfère car, en plus d’être compatible avec les navigateurs courants sans devoir maintenir des feuilles de style spécifiques, il est particulièrement flexible et convient tout à fait à l’utilisation des métriques relatives (em, %, etc). Vous remarquerez que, contrairement à celle des panneaux latéraux, la largeur du panneau central n’est pas renseignée dans la feuille de style et, de fait, celui-ci s’adapte automatiquement à l’espace restant. Cette particularité rend possible (et sans mal de tête !) l’utilisation de l’unité px dans des éléments tels que les marges (intérieures et extérieures) ou les bordures, chose que je vous défie de faire avec un design précontraint du type 25% | 50% | 25% !
C’est terminé, maintenant libre à vous d’apporter vos propres modifications !
Commentaires récents