MODÈLES DE PAGE XHTML/CSS

Voici quelques modèles en XHTML et CSS pour intégrer vos pages sur de bonnes bases. Vous pouvez facilement copier/coller le code et les styles et les modifier comme bon vous semble.

LARGEUR FLUIDE

• 2 colonnes
  Gabarit simple avec deux colonnes à largeur variable
• Menu à gauche
  Gabarit avec menu à gauche
• Menu flottant
  Gabarit avec menu flottant
• Menu à droite
  Gabarit avec menu à droite
• Colonne centrale fluide et menu à gauche
  Gabarit avec header, colonne centrale fluide, colonne gauche et footer
• Colonne centrale fluide et menu à droite
  Gabarit avec header, colonne centrale fluide, colonne droite et footer

LARGEUR FIXE

• Frame gauche
  Frame à gauche en CSS
• Frame droite
  Frame à droite en CSS
• Colonne à gauche
  Gabarit avec colonne à gauche
• Colonne à droite
  Gabarit avec colonne à droite
• Frame gauche + bas
  Frame à gauche et en bas en CSS
• Frame haut + gauche
  Frame en haut et à gauche en CSS

LARGEUR FLUIDE

• Colonne gauche, centre, droite
  Gabarit classique à trois colonnes à largeur variable
• Colonne gauche, droite, centre
  Gabarit spécial avec colonne gauche et droite puis colonne centrale

LARGEUR FIXE

• Colonne gauche, centre, droite
  Gabarit classique à trois colonnes à largeur fixe
• Frame gauche et droite
  Frame à gauche et à droite en CSS
• Colonne gauche, droite, centre
  Gabarit spécial avec colonne gauche et droite puis colonne centrale
• Colonne centre, gauche, droite
  Gabarit spécial avec colonne centrale, gauche puis colonne droite

LARGEUR MIXTE

• Colonnes Fluide/Fixe/Fixe
  Gabarit avec colonne centrale à largeur variable, colonne gauche et droite fixes
• Colonnes Fluide/Fixe/Fluide
  Gabarit avec colonne centrale et droite à largeur variable puis colonne gauche fixe
• Colonnes Fluide/Fluide/Fixe
  Gabarit avec colonne gauche et centrale à largeur variable puis colonne droite fixe

BOÎTE À STYLES

Dans cette partie, vous trouverez des menus en CSS originaux et facilement adaptables dans vos sites. Des exemples de tableaux, de listes et de formulaires sont également à votre disposition.

HORIZONTAL

• Menu simple
  Menu avec fond de couleur et rollover
• Menu à séparation verticale
  Menu avec fond de couleur, rollover et séparateur vertical
• Menu relief
  Menu avec fond de couleur et rollover en relief
• Menu border
  Menu avec bordure en rollover
• Menu onglets
  Menu avec onglets de couleurs
• Menu images
  Menu avec images de fond

VERTICAL

• Menu simple
  Menu avec fond de couleur et rollover
• Menu bordure gauche
  Menu avec bordure permanente à gauche
• Menu relief
  Menu avec fond de couleur et rollover en relief
• Menu puce rollover
  Menu avec puce de couleur en rollover

• Tableau simple avec CSS
  Noir, blanc et gris, sobre mais classe
• Orange table
  Orange et gris foncé
• Green table
  Vert et gris clair
• Blue table
  Bleu foncé et bleu clair

• Liste simple
• Liste carrée
• Liste cercle
• Liste image
• Liste sans puce
• Margin / padding
• Liste rollover
• Liste filet
• Séparation
• Liste horizontale
•  
•  
•  
•  
•  

• Select
• Multiple Select
• Text Area
• Submit buttons
• Input files
• Text input
•  
•  
•  
•  
•  
•  
•  
•  
•  

MISE EN FORME CSS

Quelques exemples de mises en forme sont exposées ci-dessous :

TITRE

• Styles css pour les titres
  Centrer un bloc dans une page

PARAGRAPHE

• Bloc centré
  Centrer un bloc dans une page
• Texte sur 2 colonnes
  Mise en page d'un article sur deux colonnes
• Texte sur 2 colonnes avec image
  Mise en page d'un article sur deux colonnes avec une image
• Paragraphes en CSS
  Mise en forme de paragraphes

MOT

• Styles de texte
  Différents styles css à appliquer sur vos textes