Un gabarit css, c''est en quelque sorte sa structure HTML et CSS d'un site Internet. Nous vous proposons un large panel de gabarits css, comprendre par l'exemple tel est notre objectif. Il y a 2 choix concernant la structure générale du site :
- Structure fluide (qui va s'étirer sur toute la largeur de l'écran)
- Structure fixe (largeur fixe qui pourra être centrée ou non)
Ensuite notre structure peut contenir 1, 2 ou 3 colonnes comme suit :
Les exemples qui suivent ont tous été testés sous IE 5.5, 6, 7 ,8, Firefox 3.x, Opéra, Chrome. Ils sont également valides W3C. Nous avons donné un nom à chaque zone pour mieux nous repérer :
- Header : zone d'entête
- Content : zone de contenu principal
- Left : colonne de gauche
- Right : colonne de droite
- Footer : zone de pied de page
Gabarits 1 colonne
Gabarit css 02
Gabarit une colonne en largeur fixe. Sa largeur est fixée pour une résolution écran 1024x768px, la largeur recommandée est de 998px (il faut tenir compte du scroll vertical).
Gabarits 2 colonnes
Gabarit css 03 (Fluide)
Gabarit deux colonnes, la colonne gauche est fixe et celle de droite fluide pour s'adapter à la largeur de l'écran.
Gabarit css 05 (Fluide)
Gabarit deux colonnes, la colonne droite est fixe et celle de gauche fluide pour s'adapter à la largeur de l'écran.
Gabarits 3 colonnes
Gabarit css 07 (Fluide)
Gabarit trois colonnes, les colonnes de gauche et droite sont fixes, celle du milieu est fluide pour s'adapter à la largeur de l'écran.
Une variante simplifiée est disponible, les 3 colonnes sont dissociées dans leurs tailles en hauteur : voir Gabarit 07 Bis.
Gabarit css 08 (Fixe)
Gabarit trois colonnes, les 3 colonnes sont fixées en largeur. Une variante simplifiée est disponible avec ses 3 colonnes dissociées en hauteur : voir Gabarit 08 Bis.
Gabarit css 09 (Fluide)
Gabarit trois colonnes type portail, la colonne de gauche est variable et les 2 colonnes de droite ont une largeur fixe.
Notes :
Une balise <hr class="clear"> a été utilisée sur certains gabarits, elle sert à maintenir un conteneur d'éléments flottants.
Lors de la création de votre gabarit, gardez à l'esprit les résolutions écrans utilisées par les Internautes.
Résolutions écrans Janvier 2010
On distingue encore beaucoup d'utilisateurs en 1024 d'où la nécessité de garder une taille fixe s'adaptant à cette largeur (998 pixels par exemple). La largeur minimum pour les backgrounds est de 1920 pixels, si votre background est inférieur vous risquez d'en frustrer quelques'uns.
Il ne nous reste plus qu'à vous souhaiter bon courage pour votre développement. N'hésitez pas à commenter cet article pour d'éventuelles erreurs ou omissions.