Impressum

Exercice de positionnement de boîtes bloc pour un site au design FLUID : trois Colonnes entre En-tête et Pied-de-Page

Propriétés importantes : width, hight, padding, largin, position, float, clear, overflow
jeudi 22 décembre 2005
par  François Daniel Giezendanner
popularité : 1%

L’exercice consiste à créer un site Fluide (%) constitué de cinq boîtes principales :

  1. un En-Tête
  2. une Colonne Gauche
  3. une Colonne Droite
  4. une Colonne Centrale
  5. un Pied-de-Page

  • Téléchargez le fichier Powerpoint :
    PowerPoint - 142 ko

Préambule

Le cours vous présente également d’autres cas et vous trouverez sur le Web un grand nombre de manières différentes de créer une telle page, de la plus simple à la plus sophistiquée.

Le présent exemple est volontairement très simple, il met en évidence le placement de boîtes bloc dans le flux, la rupture du flux pour certaines boîtes et la manière avec laquelle les boîtes suivantes viennent se placer dans le flux.

Dans un premier temps, il faut créer et placer ces cinq boîtes principales sous la forme la plus simple possible.


 I. Placement des boîtes bloc sans les CSS : lecture et placement dans le flux

Commençons par créer une boîte bloc div pour chacune de ces 5 boîtes bloc principales :

Si l’on n’ajoute pas de règles CSS pour compléter le comportement de ces cinq boîtes bloc, elles sont lues dans le flux et se placent successivement l’une au-dessous de l’autre. Lorsque les boîtes ont des marges externes, la marge basse de la boîte supérieure et la marge haute de la boîte inférieure se superposent de telle manière que la marge inter-boîte résultante est la plus grande des deux marges concernées.

Afin de visualiser clairement les boîtes, attribuons leurs des règles CSS élémentaires à placer dans le head ou mieux, dans une feuille de style externe :

Et complétons comme suit le code HTML du body :

Voici le résultat :

GIF - 52.5 ko

Téléchargez le fichier HTML correspondant :

HTML - 2.5 ko

Afin de visualiser les CSS en ccorrespondance, changeons le texte dans le code HTML du body en exploitant la balise pre :

Voici le résultat dans les navigateurs modernes :

GIF - 15.5 ko

Téléchargez le fichier HTML correspondant :

HTML - 1.7 ko

Or, pour les besoins de la mise en page, trois de ces boîtes doivent être lues dans le flux et les deux autres doivent être sorties du flux.


 II. Utilisation des CSS pour placer ces 5 boîtes bloc principales

Pour placer les boîtes bloc correctement les une par rapport aux autres, nous allons utiliser les propriétés CSS suivantes :

  • position
    • prend les valeurs : static (par défaut), relative, absolute, fixed.
  • float
    • prend les valeurs : left, right, none
  • width
    • prend les valeurs : n, p%, auto.
  • hight
    • prend les valeurs : n, auto.
  • margin
    • prend les valeurs : n, p%, auto.
  • paddding
    • prend les valeurs : n, p%.
  • clear
    • prend les valeurs : none, left, right, both.
  • overflow
    • prend les valeurs : visible (par défaut), hidden, auto, scroll.

Voilà la disposition que l’on souhaite obtenir pour les cinq boîtes bloc principales avec les principales déclarations CSS :

GIF - 33.9 ko

Afin de disposer ces 5 boîtes bloc principales correctement, créons les règles CSS à appliquer à chacune de ces balises div. Les positions des boîtes ont toutes la valeur static par défaut (position : static ;) on peut l’indiquer explicitement ou non :

  • En-Tête : Avec la règle CSS (.entete), la boîte de l’En-Tête prend toute la largeur (width : 100% ;), elle a une marge interne de 5 pixels (padding : 5px ;) ;) et n’a pas de marge externe (margin : 0px ;). Sa couleur de fond est donnée par l’instruction background-color : #CCFFCC. Sa hauteur n’est pas fixée, cela signifie qu’elle s’adapte au contenu.
  • Colonne Gauche : Avec la règle CSS (.gauche) , la boîte de la Colonne Gauche est sortie du flux horizontal, placée à gauche dans la boîte body ( float : left ;) et collée sous l’En-Tête, sa largeur est fixée à 15% ( width : 15% ;), sa marge interne est de 0 pixels (padding : 0px ;), sa marge externe est de 0 pixels (margin : 0px ;), sa couleur de fond est fixée (background-color : #CC9999 ;) et le texte est centré (text-align : center ;).
    Remarque : cette boîte sort du flux selon l’axe horizontal grâce à la déclaration « float : left ; » mais respecte le flux vertical puisqu’elle se place selon le flux sous la boîte « En-Tête ».
  • Colonne Droite : Avec la règle CSS (.droite), la boîte de la Colonne Droite est sortie du flux horizontal, placée à droite dans la boîte body ( float : right ;) et collée sous l’En-Tête, sa largeur est fixée à 30% ( width : 30% ;), sa marge interne est de 0 pixels (padding : 0px ;), sa marge externe est de 0 pixels (margin : 0px ;) et sa couleur de fond est fixée (background-color : #FFFF66 ;).
    Remarque : cette boîte sort du flux selon l’axe horizontal grâce à la déclaration « float : right ; » mais respecte le flux vertical puisqu’elle se place selon le flux sous la boîte « En-Tête ».
  • Colonne Centrale : Avec la règle CSS (.centre) , la boîte de la Colonne Centrale est placée dans le flux et grâce à ses marges externes gauche fixée à 15% et droite fixée à 30% (margin : 0px 30% 0px 15% ;) elle vient s’intercaler entre les Colonnes Gauche et Droite (qui sont sorties du flux grâce à l’instruction float) et se colle sous l’En-Tête dans l’espace laissé libre de 55%, ce qui correspond à sa largeur (content + paddding + cadre) que l’on calcule comme suit : 100% - 15% - 30% = 55%. Sa marge interne est de 5 pixels (padding : 5px ;), et sa couleur de fond est fixée (background-color : #33FFFF ;).
    Remarque : les marges externes n’interfèrent pas avec les boîtes « Colonnes Gauche » et « Colonnes Droite », pour ces boîtes elles sont complètement « transparentes ».
    • A titre d’exemple, nous lui avons intégré une boîte de contenu paramétrée par la règle (.contenu) dont la marge interne est de 10px (padding : 10px ;), la marge externe est de 5px (margin : 5px ;), le cadre est fin, en trait continu et de couleur rouge (border : thin solid #FF0000 ;), la largeur exploite la place disponible (width : auto ;) et elle est munie de deux coulisses (verticale et horizontale) pour assumer les textes trop longs.
  • Pied-de-Page : Finalement, avec la règle CSS (.pieddepage), la boîte du pied de page est placée dans le flux, elle vient donc se placer en dessous des trois colonnes, cette position est asurée grâce à la propriété clear qui empêche le débordement des colonnes (clear : both ;). La boîte du Pied-de-Page prend toute la largeur (width : 100% ;), n’a pas de marge interne et pas de marge externe. Sa hauteur (hight) n’est pas fixée, cela signifie qu’elle s’adapte au contenu. Sa couleur de fond est fixée (background-color : #CCFFCC ;).

Voici ces règles de style à placer dans le head de la page, ou mieux, dans une feuille de styles externe :

Et voici les balises HTML div écrites dans le body :

Et voici le résultat : GIF - 77.2 ko

  • Téléchargez la page HTML correspondante :
    HTML - 3.1 ko
  • Téléchargez la même page HTML correspondante avec essentiellement les règles CSS en guise de texte :
    HTML - 3 ko
  • Téléchargez la même page HTML correspondante avec les règles CSS en guise de texte :
    HTML - 2.1 ko

GIF - 20.9 ko


 III. Changement de la position des boîtes en interchangeant l’ordre des balises pour les boîtes « Colonnes gauche », « Colonnes Droite » et « Colonnes Centrale » dans le code HTML

A ce stade de l’exercice, interchangez de différentes manières l’ordre de succession des boîtes « Colonne Gauche », « Colonne Droite » et « Colonne Centrale » dans le code HTML et expliquez les changements de positions observés.


 IV. Introduction des balises bloc dans trois des cinq boîtes principales

Propriété overflow : hidden, scroll, visible ou auto

Rappelons que la propriété overflow indique au navigateur ce qu’il doit faire lorsque le contenu est plus grand que la boîte parent qui le contient, on peut lui assigner les quatre valeurs suivantes :

  • hidden : la partie du contenu qui dépasse la boîte est cachée.
  • scroll : la partie du contenu qui dépasse la boîte est cachée mais accessible en utilisant une barre de défilement mise à disposition.
  • visible : la partie du contenu qui dépasse la boîte est affichée et déborde sur les autres boîtes environnantes.
  • auto : le contrôle est restitué au navigateur.

Exemple de déclaration

overflow : scroll ;

En guise d’exemple d’utilisation de la propriété overflow, voici une application qui introduit des boîtes bloc dans les boîtes bloc principales des trois colonnes.

Le code CSS est :

Et le code HTML est :

Et voici ce que cela donne :

GIF - 34.7 ko

  • Téléchargez la page HTML correspondant à l’image ci-dessus avec les règles CSS et la déclaration overflow : scroll ; en guise de texte :
    HTML - 2.7 ko

Documents joints

HTML - 3.6 ko
HTML - 3.6 ko

Publications

Derniers articles publiés

Navigation

Agenda

<<

2017

 

<<

Octobre

 

Aujourd'hui

LuMaMeJeVeSaDi
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
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