Partagez winpix...

Facebook Twitter Google Delicious RSS

Gabarits CSS

Posté le 19 mars 2010 par winpix

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 :

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 :

  • 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 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.

Partager cet article

Facebook Twitter Google My Space Delicious

A lire également dans CSS / Tutoriaux

Commentaires

Vous pouvez poster votre commenataire sans être identifié.

En revanche si vous possédez un compte, identifiez-vous cela vous évitera de renseigner à chaque vos coordonnées.

Les champs marqués d’une * sont obligatoires.

Ce formulaire accepte le BBCODE.


Identification