ajax

Gabarits CSS

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 :

Ensuite notre structure peut contenir 1, 2 ou 3 colonnes comme suit :

gabarits css et html

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 :

Gabarits 1 colonne

gabarit 1 colonne fluide

Gabarit css 01

Gabarit une colonne en largeur fluide qui prendra toute la largeur de l'écran.


gabarit 1 colonne fixe

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 2 colonnes fluides

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 2 colonnes fixes

Gabarit css 04 (Fixe)

Gabarit deux colonnes, d'une largeur fixe en résolution 998px de large.


gabarit 2 colonnes fluides

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.


gabarit 2 colonnes fixes

Gabarit css 06 (Fixe)

Gabarit deux colonnes, d'une largeur fixe en résolution 998px de large.


Gabarits 3 colonnes

gabarit 3 colonnes fluides

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 3 colonnes fixes

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 3 colonnes fluides

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.


gabarit 3 colonnes fluides style portail

Gabarit css 10 (Fixe)

Gabarit trois colonnes type portail, les 3 colonnes sont fixées en largeur.


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

Statistiques resolutions ecran

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.

winpix - © 2010 - 2021