Impressum

CSS : Quelques exemples de mise en page fluide en n colonnes

vendredi 21 janvier 2005
par  François Daniel Giezendanner
popularité : 1%

Ces quelques exemples présentent 3 manières simples de créer des pages web multi-colonnes en exploitant les feuilles de style.

Téléchargez le fichier Powerpoint qui montre les divers aspects inter-reliés de :

  • HTML purgé ;
  • Hiérarchie arborescente des balises ;
  • CSS internes à la page ou chargées par link ;
  • Exploitation des CSS ;
  • Imbrication des boîtes ;
  • Positionnement et attributs des boîtes ;
  • ...

GIF - 39.2 ko

Télécharger le document pdf à l’article : Supports du cours CSS2


 Template fluide en 3 colonnes de : Michael Meadhra - zdnet.fr

Comme premier exercice, nous nous basons sur l’article de Michael Meadhra :

CSS : créer une mise en page avec trois colonnes de longueur égale. Par Michael Meadhra. Builder.com. Mercredi 22 septembre 2004

Template de l’étape B

Dans le document original, la feuille de style est placée dans la balise <head> de la page. Nous en faisons une feuille de style externe que nous nommons : « zd-3col.css » et que nous appelons depuis la page HTML avec l’instruction link placée dans le <head> :

<link href="zd-3col.css" rel="stylesheet" type="text/css">

Pour l’exercice, utilisez soit le source de template susmentionné (pour produire les deux fichiers ci-dessous), sinon utilisez directement les deux fichiers suivants :

1. Code source du template :

HTML - 1 ko
Template : Meadhra-ZD

2. Feuille de style zd-3col.css (une fois le document téléchargé, supprimez l’extension txt) :

texte - 546 octets
Feuille de style : zd-3col.css

Procédez aux modifications :

  • Proposées par l’enseignant
  • Selon vos objectifs, goût, personnalité, inspiration, ...

 Template fluide en 3 colonnes de : Ultra-Fluide

Référence : Site ultra-fluide.com

Pour notre exercice, nous allons prendre le template appliqué à un petit contenu.

Dans le document original, la feuille de style est placée dans la balise <head> de la page. Nous en faisons une feuille de style externe que nous nommons : « Trois_Colonnes_UF.css » et que nous appelons depuis la page HTML avec l’instruction link placée dans le <head> :

<link href="Trois_Colonnes_UF.css" rel="stylesheet" type="text/css">

Pour l’exercice, utilisez soit le source de template susmentionné (pour produire les deux fichiers ci-dessous), sinon utilisez directement les deux fichiers suivants :

1. Code source du template :

HTML - 1.2 ko
Template : Ultra-Fluide

2. Feuille de style « Trois_Colonnes_UF.css » (une fois le document téléchargé, supprimez l’extension txt) :

texte - 1.1 ko
Feuille de style : trois_colonnes_uf.css

Procédez aux modifications :

  • Proposées par l’enseignant
  • Selon vos objectifs, goût, personnalité, inspiration, ...

 Template fluide en 4 colonnes de : IntensivStation

Référence : Site intensivstation.ch

Dans le document original, la feuille de style est placée dans la balise <head> de la page. Nous en faisons une feuille de style externe que nous nommons : « quatre_colonnes.css » et que nous appelons depuis la page HTML avec l’instruction link placée dans le <head> :

<link href="quatre_colonnes.css" rel="stylesheet" type="text/css">

Pour l’exercice, utilisez soit le source de template susmentionné (pour produire les deux fichiers ci-dessous), sinon utilisez directement les deux fichiers suivants :

1. Code source du template :

HTML - 3.2 ko
Template IntensivStation : quatre_col_fr_corr.html

2. Feuille de style « quatre_colonnes.css » (une fois le document téléchargé, supprimez l’extension txt) :

texte - 1.2 ko
Feuille de style : quatre_colonnes.css

3. Les 5 images du template fluide en 4 colonnes :

GIF - 1.2 ko
cc.gif
GIF - 1.2 ko
css_logo.gif
GIF - 1 ko
css.gif
GIF - 289 octets
monorom.gif
GIF - 346 octets

Téléchargez le fichier zip :

Zip - 4.5 ko
Les 5 images du template fluide en 4 colonnes : img_intensivstation_4col.zip

Procédez aux modifications :

  • Proposées par l’enseignant
  • Selon vos objectifs, goût, personnalité, inspiration, ...

Publications

Derniers articles publiés

Navigation

Articles de la rubrique

  • CSS : Quelques exemples de mise en page fluide en n colonnes

Agenda

<<

2017

 

<<

Septembre

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
2526272829301
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


1 site référencé dans ce secteur