Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > Une nouvelle structure : la boîte           Révision : 05 février 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(04 février 2004)

IV - Une nouvelle structure : la boîte

IV-1- Introduction

Dans le chapitre précédent, nous avons donné un exemple de boîte. Rappelons qu'il s'agit d'une structure rectangulaire contenant de l'information, entourée de marges internes, d'un cadre, et de marges externes -- comme le montre la figure ci-dessous. La présence des marges et du cadre est facultative.

Structure d'une boîte css

Pour construire une boîte, on utilise une balise du HTML (P, DIV, SPAN, H1 à H6, UL, LI, TD, etc.) à laquelle on applique un style. Toutes les balises précitées n'offrent pas les mêmes possibilités, et nous étudierons cela en détail dans les chapitres suivants. Dans le présent chapitre, nous utilisons uniquement la balise DIV, parce que les navigateurs sont ainsi faits, que cette balise implémente mieux que les autres les recommandations du W3C.

Pour des raisons de simplicité, les exemples seront traités à l'aide de styles locaux, mais la transposition à des styles internes ou externes ne pose pas de problème -- du moins pas avec les versions récentes des navigateurs.

 

IV-2- La zone de contenu

Si rien n'est précisé quant aux marges et au cadre, la boîte se réduit à la zone de contenu. C'est effectivement ce qui se passe avec la balise div et, pour le montrer, nous utilisons le code suivant :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<div style="background-color: yellow">Boite DIV sans marges ni cadre,<br>colorée en jaune</div>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Pour matérialiser la zone de contenu, nous avons coloré en jaune le fond de la boîte. Pour matérialiser l'absence de marges, nous avons tiré deux traits noirs au dessus et en dessous de la boîte. La figure ci-dessous représente ce qui s'affiche dans le navigateur. Nous voyons qu'il n'y a aucun espace entre la zone jaune et les traits noirs, ce qui illustre l'absence de marges. Nous remarquons également que le contenu est calé par défaut contre le bord gauche de la boîte, comme il est déjà d'usage en HTML.

 
  Boîte sans marges ni cadre    
 

Le navigateur règle les dimensions de la boîte de la manière suivante (cas d'une boîte "fluide", dont on n'a précisé ni la largeur, ni la hauteur) :

Valeur par défaut : si nous supprimons le texte contenu dans la boîte, la hauteur de la zone de contenu devient nulle. Comme la boîte ne possède ni marges ni cadre, sa hauteur devient nulle. Il en résulte que la boîte ne s'affiche plus. Si on fait l'expérience sur l'exemple précédent, les deux lignes noires deviennent jointives.

 

IV-3- Les marges internes

Les quatre marges internes (haute, droite, basse, gauche) sont réglables séparément, comme le montre le code suivant :

<div style="padding-top: 30px; padding-right: 60px; padding-bottom: 50px; padding-left: 40px; background-color: yellow><span style="background-color: #FFCCFF">Boite DIV sans marges externes ni cadre,<br>colorée en jaune, zone de texte violette</span></div>

Pour faire apparaître les marges, nous avons coloré la zone de contenu en violet (à l'aide de la balise span). Nous obtenons ainsi l'affichage suivant :

 
  Boîte avec marges internes    
 

Cette figure appelle trois remarques :

Si nous supprimons l'information contenue dans la boîte, la hauteur de la zone de contenu devient nulle. La hauteur de la boîte devient égale à la somme des marges internes haute et basse, soit 80 pixels. La boîte s'affiche alors sous la forme d'une bande jaune de 80 pixels de haut, occupant toute la largeur de la fenêtre du navigateur (moins les marges que le navigateur attribue par défaut à la page).

Il existe un raccourci permettant de fixer les quatre marges internes d'une boîte, comme le montre le code suivant :

<div style="padding:30px 60px 50px 40px; background-color: yellow"><span style="background-color: #FFCCFF">Boite DIV sans marges externes ni cadre,<br>colorée en jaune, zone de texte violette</span></div>

D'une manière générale, le navigateur interprète les valeurs qui suivent l'identificateur "padding", en fonction de leur nombre, comme l'indique la liste suivante :

Ces quatre possibilités sont résumées dans le tableau suivant :

1
4 2
3
1
2 2
3
1
2 2
1
1
1 1
1

Valeur par défaut : si le style ne mentionne pas les marges internes, celles-ci ont une épaisseur nulle par défaut.

 

IV-4- Le cadre

Le cadre est situé entre les marges internes et externes de la boîte. On peut spécifier séparément le style, la couleur et l'épaisseur de chacun des quatre cotés du cadre.

Le style du cadre. Il existe une dizaine de possibilités, que l'on peut regrouper ainsi :

La figure ci-dessous représente ces différents styles en action. Comme nous l'avons déjà souligné dans le précédent chapitre, l'aspect obtenu dépend du navigateur employé. En particulier, IE5/Mac n'affiche pas correctement les styles "ridge" et "inset" (ils apparaissent comme "solid").

               
dotted dashed solid double groove ridge inset outset

Le style d'un cadre est défini comme le montre le code ci-dessous.

<div style="border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid; border-left-style: double; padding: 10px; background-color: yellow"><span style="background-color: #FFCCFF">Boite DIV avec marges internes,<br>colorée en jaune, zone de texte violette</span></div>

La figure ci-dessous montre le résultat obtenu dans IE. Nous noterons que la couleur de fond se glisse sous le cadre, comme on peut le voir pour 3 côtés (haut, droite, gauche).

 
  Boîte avec marges internes et cadre    
 

Il existe un raccourci ("border-style") qui fonctionne suivant des règles identiques à celles utilisées pour les marges internes. Exemple :

<div style="border-style: solid dotted; padding: 10px; background-color: yellow"><span style="background-color: #FFCCFF">Zone de contenu</span></div>

Ce code s'affiche de la manière suivante dans IE :

 
 
  Boîte avec marges internes et cadre    
 

Ces deux derniers exemples sont rassemblés dans une page auxiliaire.

Valeur par défaut : aucun cadre n'est affiché si le style de la boîte ne mentionne rien concernant le style du cadre. Par défaut, le cadre est absent, et ses autres propriétés (épaisseur, couleur) ne se voient pas.

La couleur du cadre. Elle peut être réglée pour chacun des quatre côtés séparément, comme le montre l'exemple de code suivant :

<div style=" border-style: double; border-top-color: aqua; border-right-color: fuchsia; border-bottom-color: yellow; border-left-color: gray; padding: 10px">Coloration du cadre de la boîte</div>

Comme nous n'avons pas précisé la valeur de l'épaisseur du cadre, les navigateurs adoptent une valeur par défaut (4 pixels pour IE, 3 pixels pour NS). Le code ci-dessus s'affiche ainsi dans IE :

 
  Coloration du cadre de la boîte    
 

Attention : les couleurs n'apparaissent que si le style du cadre est défini. En effet, la valeur par défaut du style est "none", c'est à dire qu'il n'y a pas de cadre. S'il n'y a pas de cadre, les couleurs ne se voient pas...

Il existe un raccourci ("border-color") qui fonctionne suivant des règles identiques à celles utilisées pour les marges internes. Exemple :

<div style=" border-style: dotted; border-color: red silver blue; padding: 6px"> Coloration du cadre (raccourci) </div>

Ce code s'affiche ainsi dans IE :

 
  Coloration du cadre de la boîte    
 

Vous pouvez retrouver ces deux derniers exemples dans une page auxiliaire.

Valeur par défaut : si la couleur du cadre n'est pas évoquée dans le style, les navigateurs affichent le cadre en noir.

L'épaisseur du cadre. Elle peut être réglée pour chacun des quatre côtés séparément, comme le montre l'exemple de code suivant :

<div style=" border-style: groove; border-top-width: 4px; border-right-width: 5px; border-bottom-width: 6px; border-left-width: 3px; border-color: white; padding: 8px"> Epaisseur du cadre</div>

Ce code s'affiche ainsi dans le navigateur de Netscape (la couleur jaune provient du fond de page) :

 
  L'épaisseur du cadre de la boîte    
 

Attention : comme pour le réglage de la couleur, le cadre n'apparaît pas si son style n'est pas défini. En effet, la valeur par défaut du style est "none", c'est à dire qu'il n'y a pas de cadre. S'il n'y a pas de cadre, son épaisseur ne se voit pas...

Il existe un raccourci ("border-width") qui fonctionne suivant des règles identiques à celles utilisées pour les marges internes. Exemple :

<div style=" border-style: double; border-width: 6px 3px; border-color: black; padding: 6px">Epaisseur du cadre (double)</div>

Ce code s'affiche ainsi dans IE :

 
  L'épaisseur du cadre de la boîte    
 

Vous pouvez retrouver ces deux derniers exemples dans une page auxiliaire.

Valeur par défaut : si l'épaisseur du cadre n'est pas définie, les navigateurs utilisent une valeur par défaut que nous avons déjà mentionnée (4 pixels pour IE, 3 pixels pour Netscape).

Regroupement de l'épaisseur, du style et de la couleur par côté. Il est possible d'alléger la description du cadre, comme le montre l'exemple suivant :

<div style="border-top: 6px dotted blue; border-right: 3px double red; border-bottom: 4px solid teal; border-left: 3px outset black; padding: 5px">Regroupement des styles relatifs au cadre d'une boîte</div>

Ce code s'affiche de la manière suivante dans IE :

 
  Epaisseur, style et couleur du cadre de la boîte    
 

Vous pouvez retrouver cet exemple dans une page auxiliaire.

Regroupement général de l'épaisseur, du style et de la couleur. Lorsque les quatre côtés du cadre sont identiques, ce qui est souvent le cas, on peut simplifier le style comme le montre l'exemple suivant :

<div style=" border: 7px outset aqua; padding: 8px">Style de cadre : raccourci général</div>

Ce code s'affiche de la manière suivante dans IE :

 
  Style du cadre de la boîte : raccourci général    
 

Vous pouvez retrouver cet exemple dans une page auxiliaire.

 

IV-5- Les marges externes

Les quatre marges externes (haute, droite, basse, gauche) sont réglables séparément, comme le montre le code suivant :

<div style="margin-top: 30px; margin-right: 50px; margin-bottom: 40px; margin-left: 60px"><span style="background-color: #FFAAFF"> Marges externes </span></div>

Les marges externes sont toujours transparentes. Pour les faire apparaître, nous avons tiré un trait noir juste au-dessus et juste au-dessous de la boîte, et nous avons coloré la zone de contenu en violet (à l'aide de la balise span). Nous obtenons ainsi l'affichage suivant :

 
  Marges externes de la boîte    
 

Il existe un raccourci permettant de fixer les quatre marges externes d'une boîte, qui fonctionne suivant des règles identiques à celles utilisées pour les marges internes. Exemple :

<div style="margin: 10px 20px 30px 40px"><span style="background-color: #FFAAFF"> Marges externes </span> </div>

Vous pouvez retrouver les deux exemples précédents dans une page auxiliaire.

Si nous supprimons toute l'information contenue dans la boîte (y compris l'espace insécable qu'un éditeur tel que FrontPage ne manquera pas d'installer), le sort des marges externes est variable :

Valeur par défaut : si le style ne mentionne pas les marges externes, celles-ci on une épaisseur nulle par défaut.

 

IV-6- La boîte complète

Pour terminer, le code correspondant à une boîte complète, avec sa zone de contenu, ses marges internes, son cadre et ses marges externes, les quatre côtés étant traités de la même manière :

<div style="padding: 10px; border: 7px ridge yellow; margin: 15px; background-color: #FFCCCC; text-align: center"> <span style="background-color: #FFAAFF"> Conclusion : désormais, vous savez tout sur la mise en boîte </span> </div>

Ce code s'affiche comme le montre la figure ci-dessous (les marges hautes et basses sont mises en évidence grâce à deux traits noirs) :

 
  Boîte complète : marges et cadre    
 

Cet exemple peut être consulté sur une page auxiliaire.

Page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm