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 > Les propriétés de la boîte           Révision : 27 avril 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(10 février 2004)

V - Les propriétés de la boîte

V-1- Introduction

Le présent chapitre est consacré à l'étude des propriétés des boîtes CSS. Nous examinerons tour à tour :

 

V-2- Les dimensions de la boîte

Réglage de la largeur et de la hauteur. Nous pouvons fixer les dimensions d'une boîte à l'aide des identificateurs "width" et "height". Malheureusement, les deux principaux navigateurs du marché n'interprètent pas ces identificateurs de la même manière, et les ennuis nous guettent.

Pour commencer, nous créons une boîte vide pourvue de marges internes (10 pixels), de marges externes (20 pixels), d'un cadre de 5 pixels d'épaisseur, et d'un fond jaune. Nous lui attribuons une largeur de 40 pixels et une hauteur de 80 pixels. Le code correspondant s'écrit :

<div style="background-color: yellow; padding: 10px; border: 5px solid black; margin: 20px; width: 40px; height: 80px"></div>

Les figures ci-dessous nous montrent comment cette boîte s'affiche dans IE6 et NS7 respectivement. Pour faire apparaître les marges externes haute et basse, nous avons tiré un trait d'un pixel d'épaisseur juste au-dessus et juste en dessous  de la boîte. Nous notons les différences suivantes (sur Mac comme sur PC) :

 
  La boîte affichée par Internet Explorer    
 
     
 
  La boîte affichée par Netscape    
 
La boîte affichée par IE La boîte affichée par NS

La recommandation du W3C précise (dans sa traduction en français) : "Cette propriété [width] spécifie la largeur du contenu des boîtes...". C'est donc le navigateur de Netscape qui interprète correctement la norme, mais... c'est celui de Microsoft qui détient l'essentiel du marché. On peut épiloguer tant qu'on veut, il faut se rendre à l'évidence : la même boîte ne s'affiche pas avec les mêmes dimensions dans les deux navigateurs.

Diverses astuces d'écriture ont été proposées pour remédier à cette situation. La plus classique consiste à attribuer les marges externes à une boîte servant de conteneur, et à fixer ses dimensions. L'absence de marges internes et de cadre fait que les deux navigateurs affichent la même chose. On attribue ensuite le cadre et les marges internes à une seconde boîte contenue dans la première. Le code correspondant s'écrit :

<div style="width: 110px; height: 70px; margin: 20px; background-color: silver">
<div style="border: 5px solid black; padding: 10px; background-color: yellow"></div>
</div>

On constate alors que la boîte interne ne remplit pas la boîte conteneur dans le sens de la hauteur (ce qui est normal), tant du moins que cette boîte interne ne contient pas d'information, comme le montre l'image ci-dessous. Nous avons coloré en gris le fond de la boîte conteneur afin de mettre en évidence ses dimensions. Cette image s'affiche de la même façon dans IE et dans NS. Cette solution est parfois déconseillée, au motif que l'emboîtement de boîtes DIV ferait planter certaines versions de NS, mais on peut tourner la difficulté en emboîtant des boîtes P.

Une autre solution consiste à faire basculer le navigateur IE en mode conforme, comme expliqué dans le chapitre suivant. Cette solution s'applique à la version 6 d'Internet Explorer, mais pas à la version 5 (sur PC), ce qui lui enlève beaucoup de son intérêt. Elle est déconseillée pour IE5/Mac, dont le mode conforme est fortement bogué.

Une dernière solution, enfin, nous est fournie par le "Tan hack", astuce ainsi appelée du nom de son inventeur Edwardson Tan. On trouvera sur le web une explication détaillée de son fonctionnement.

Adaptation de la largeur au contenu (image). Nous avons déjà vu que, sauf spécification contraire, une boîte s'étend le plus possible en largeur. La plupart des concepteurs de sites auraient préféré que, par défaut, la largeur de la boîte s'adapte au contenu ("shrink to fit" ou "shrinkable" div). Il est d'ailleurs question qu'il en soit ainsi dans la prochaine révision de CSS2. En attendant, nous pouvons tenter d'obtenir l'adaptation de la largeur au contenu en imposant à la boîte une largeur inférieure ou égale à celle requise pour afficher le contenu.

Nous commençons par le cas le plus simple, celui où le contenu est constitué d'une image. Par exemple, pour "encadrer" une photographie à l'aide d'une boîte à double bordure bleue, nous écrivons le code suivant :

<center><div style="border: 6px double #0000AA; width: 300px; margin: 20px"><img border="0" src="images/col.jpg" width="300" height="179"> </div> </center>

Voici ce que nous observons :

La bonne solution consiste à construire la boîte à l'aide de la balise IMG elle-même, comme le montre le code ci-dessous. Pas de problème d'affichage, ni avec IE6, ni avec NS7, ni avec IE5/Mac. Cela paraît presque trop beau... Mais en fait, cela provient des propriétés des boîtes "en-ligne", que nous étudierons au chapitre XI.

<center><img src="images/col.jpg" style="border: 6px double #0000AA; width: 300px; height: 179px; margin: 20px"> </center>

Ce code s'affiche comme le montre la figure ci-dessous :

Coucher de soleil derrière un col

Nous pouvons même écrire du code hybride (mi-HTML, mi-CSS), et obtenir quand même un bon affichage :

<center><img src="images/col.jpg" style="border: 6px double #0000AA; margin: 20px" width="300" height="179"> </center>

Adaptation de la largeur au contenu (texte). En HTML, on utilise la balise NOBR pour rendre insécable (pas de retour à la ligne) une fraction de texte. Dans une boîte définie à l'aide des styles, l'usage de cette balise génère un affichage désastreux ; il faut la remplacer par l'identificateur WHITE-SPACE, auquel on attribue la valeur "nowrap". Dans ces conditions, l'affichage doit s'effectuer sur la même ligne tant qu'une balise <br> n'est pas rencontrée. Nous attribuons à la boîte une largeur très faible (20 pixels), dans l'espoir d'obliger le contenant à épouser la taille du contenu. Le code correspondant s'écrit :

<center><div style="background-color: yellow; padding: 10px; border: 5px solid fuchsia; width: 20px; white-space: nowrap">Adaptation de la largeur de la boîte au contenu<br>avec l'identificateur WHITE-SPACE.</div></center>

Comme le montre la figure ci-dessous, un affichage correct est obtenu avec IE6 sur PC (image de gauche) parce que le navigateur gère le débordement. Par contre, le texte sort de la boîte (image de droite) ave NS/Mac, NS/PC et IE5/Mac, parce que ces navigateurs ne gèrent pas le débordement (en ce qui concerne Netscape, cela provient du moteur Gecko). De plus, Internet Explorer ne reconnaît WHITE-SPACE qu'à partir de la version 5.5, si bien qu'il n'est pas très prudent d'utiliser cet identificateur.

 
     
 
   
 
     
 
La boîte affichée par IE6/PC La boîte affichée par NS7 et IE5/Mac

Un petit "hack" (une petite astuce, en bon français) nous sauve presque : si nous déclarons la largeur de la boîte nulle, les débordements cessent (le texte reste à l'intérieur de la boîte). Mais cette fois, dans IE5/Mac, la boîte occupe toute la largeur disponible... La bonne solution est donc ailleurs.

L'identificateur OVERFLOW, doté de la valeur "scroll", permet de traiter le débordement en créant une barre de défilement horizontale. Bien entendu, pour que nous puissions voir quelque chose, il faut que la largeur de la boîte ne soit pas trop faible. Nous passons donc de 20 pixels à 200, puis nous modifions une nouvelle fois le code, qui devient :

<div style="background-color: yellow; padding: 10px; border: 5px solid fuchsia; width: 200px; white-space: nowrap; overflow: scroll">Adaptation de la largeur de la boîte au contenu<br>avec l'identificateur WHITE-SPACE.</div>

Nous obtenons, dans les deux navigateurs, le résultat représenté ci-dessous. Le texte ne déborde plus et, en actionnant la barre de défilement horizontale, l'internaute a accès à la totalité du contenu.

 
  Traitement du débordement dans IE    
 
   
 
  Traitement du débordement dans NS    
 
La boîte affichée par IE6/PC La boîte affichée par NS7

Evidemment, tout cela est un peu compliqué... et de plus, les internautes n'aiment pas avoir à se servir du défilement horizontal. La bonne solution, par conséquent, consiste à changer de balise. Si nous utilisons une cellule de tableau invisible TD pour construire la boîte, cette dernière s'ajuste automatiquement au contenu. Nous reviendrons sur ce point quand nous étudierons les tableaux (chapitre IX).

Complément : si l'on attribue à l'identificateur WHITE-SPACE la valeur "pre", tout se passe comme si la balise <pre> était présente dans le code HTML ; les espaces consécutifs sont pris en compte, ainsi que les retours à la ligne.

Valeur par défaut : lorsque l'identificateur WHITE-SPACE est absent, ou lorsqu'on lui attribue la valeur "normal", le navigateur se comporte comme d'habitude. Dans le code HTML, plusieurs espaces consécutifs ne comptent que pour un seul, un retour à la ligne introduit simplement un espace, et le navigateur fait tenir le contenu dans la boîte en forçant le retour à la ligne chaque fois que nécessaire.

Adaptation du contenu à la largeur de la boîte. Lorsque l'identificateur WHITE-SPACE n'est pas utilisé, et que la boîte n'est pas vraiment trop étroite, le contenu se distribue de manière à respecter la largeur de la boîte, comme le montre l'exemple suivant (constitué uniquement de texte). Mis à part le fait que la boîte n'a pas les mêmes dimensions dans les deux navigateurs, tout se passe bien sur Mac et PC. Voici le code :

<div style="background-color: yellow; padding: 10px; border: 5px solid black; width: 200px; text-align: justify">Adaptation du contenu (texte) à la largeur de la boîte. Ce texte est justifié.</div>

et son affichage dans les deux navigateurs :

 
     
 
     
 
     
 
La boîte affichée par IE6/PC La boîte affichée par NS et IE5/Mac

V-3- La couleur du fond de la boîte

Nous pouvons colorer le fond d'une boîte en utilisant l'identificateur BACKGROUND-COLOR, et nous nous sommes déjà servis de cette possibilité dans les exemples précédents. La valeur correspondante peut être :

               
aqua
#00FFFF
black
#000000
blue
#0000FF
fuchsia
#FF00FF
gray
#808080
green
#008000
lime
#00FF00
maroon
#800000
 
               
navy
#000080
olive
#808000
purple
#800080
red
#FF0000
silver
#C0C0C0
teal
#008080
white
#FFFFFF
yellow
#FFFF00

Les navigateurs reconnaissent beaucoup d'autres couleurs désignées par leur nom. Nous en donnerons la liste dans une annexe.

Valeur par défaut : si la couleur de fond n'est pas précisée, la boîte est transparente. On observe alors la couleur de fond du conteneur. Par défaut, la page Web est blanche (dans les anciennes versions du navigateur de Netscape, elle était gris clair).

 

V-4- L'image de fond et le pavage

Le langage HTML permet de doter une page Web, un tableau ou une cellule de tableau, d'une image de fond, que la navigateur répète pour couvrir toute la surface disponible (pavage). Les feuilles de style apportent de nouvelles possibilités :

<div style="width: 100px; height: 100px; border: 1px solid black; background-image: url('images/image-fond.gif')"> </div>

L'image de fond ("image-fond.fig") possède un fond transparent, sur lequel est posé un simple cercle vert pâle de 10 pixels de diamètre. Le code précédent conduit au résultat représenté ci-dessous (image de gauche). Le fond blanc est celui de la page elle-même.

     

Contrairement à certaines affirmations présentes sur le Web, il est possible de déclarer simultanément une couleur de fond et une image de fond, la seconde étant alors posée au-dessus de la première. Dans le cas de l'image de droite ci-dessus, l'image de fond, qui est en partie transparente, laisse apparaître le fond de la boîte, de couleur jaune pâle. Le code correspondant s'écrit :

<div style="width: 100px; height: 100px; border: 1px solid black; background-color: #FFFFCC;  background-image: url('images/image-fond.gif')"> </div>

Valeur par défaut : si l'identificateur de l'image de fond est absent, ou si sa valeur est "none", il n'y a pas d'image de fond.

Définition du pavage. Lorsqu'une image de fond est présente, il est possible de préciser :

L'identificateur correspondant est BACKGROUND-REPEAT. Il peut prendre les valeurs suivantes :  "repeat-x", "repeat-y", "repeat" et "no-repeat". Les quatre cas sont représentés ci-dessous.

     
repeat-x repeat-y
repeat no-repeat

Les valeurs "repeat-x" et "repeat-y" peuvent être utilisées pour créer un bandeau coloré horizontal ou vertical. La valeur "no-repeat" peut servir à placer une image en arrière plan -- le logo de l'entreprise, par exemple.

Valeur par défaut : si l'identificateur BACKGROUND-REPEAT est absent, ou si sa valeur est "repeat", le navigateur pave la boîte en utilisant l'image de fond.

Position du pavage. Les styles permettent de préciser, grâce à l'identificateur BACKGROUND-POSITION, la position du pavage dans la boîte. En fait, cet identificateur précise la position de l'image de fond à partir de laquelle commencera le pavage, sous forme d'un décalage par rapport à la position "en haut et à gauche". Ce décalage est le plus souvent exprimé en pourcentage des dimensions de la boîte, mais on peut aussi l'exprimer en pixels. Ainsi, le code suivant place l'image de fond (unique, pas de pavage) au milieu de la boîte :

<div style="width: 100px; height: 100px; border: 1px solid black;  background-image: url('images/image-fond.gif'); background-repeat: no-repeat; background-position: 50% 50%"> </div>

Différents cas sont représentés ci-dessous. Les dimensions de la boîte sont 60 pixels par 60 pixels, celles de l'image de fond 20 pixels par 20 pixels.

     
     
0% 0% 100% 0% 0% 100%
100% 100% 50% 50% 25% 75%

Il est ainsi possible de créer un bandeau horizontal en bas (de la boîte ou de page), ou un bandeau vertical à droite.  On peut aussi placer une image d'arrière plan n'importe où dans la boite, régler avec précision le départ du pavage, etc.

Valeur par défaut : si l'identificateur BACKGROUND-POSITION est absent, la première image du pavage est placée en haut et à gauche de la boîte.

 

V-5- La création d'un fond fixe

L'identificateur BACKGROUND-ATTACHMENT permet, dans une boîte munie d'au moins une barre de défilement, de maintenir le fond fixe lorsque l'internaute fait défiler le contenu. Pour que l'effet soit visible, il faut qu'une image de fond soit présente. Appliquée à une boîte de grande taille, voire à une page entière, la technique du fond fixe peut créer un effet assez saisissant.

La technique standard. Pour illustrer cette propriété, nous créons une boîte pourvue de dimensions telles qu'un débordement se produise dans le sens vertical, et que la barre de défilement apparaisse. Le code correspondant s'écrit (le texte qui s'affiche est abrégé) :

<div style=" padding: 2px; width: 100px; height: 100px; border: 1px solid black; font-size: 8pt; overflow: scroll; background-image: url('images/image-fond.gif'); background-attachment: fixed; background-color: #FFFFCC"> Dans cette boîte... pour constater l'effet</div>

Le résultat obtenu est représenté ci-dessous (figure de gauche). En faisant défiler le texte verticalement, vous constatez que le fond ne bouge pas. Tout marche bien avec IE7 sur PC, mais IE5 sur Mac déclenche inutilement la barre de défilement horizontale.

 
Dans cette boîte, nous avons introduit suffisamment de texte pour qu'un débordement vertical se produise, de manière à montrer que le fond reste fixe quand on fait défiler le texte. Il faut posséder un navigateur récent pour constater l'effet.
     
Dans cette boîte, nous avons introduit suffisamment de texte pour qu'un débordement vertical se produise, de manière à montrer que le fond reste fixe quand on fait défiler le texte. Il faut posséder un navigateur récent pour constater l'effet.
 

Les choses se gâtent avec le navigateur de Netscape : la manière dont l'image de fond s'affiche dépend de la position de la barre de défilement verticale. Ce défaut provient du moteur Gecko, car on le retrouve à la fois dans le navigateur de Netscape et dans celui de Mozilla. Quoiqu'en disent certains fanatiques de l'exégèse, il s'agit bien d'un bug, et non du respect de la recommandation CSS2. Ce défaut est particulièrement apparent lorsque l'image de fond n'est pas répétée verticalement, comme le montre la figure ci-dessus (à droite), où nous avons limité l'affichage de l'image de fond à une seule ligne horizontale située au milieu de la boîte. Tous se passe bien avec IE/PC, mais NS et IE5/Mac affichent l'image de fond de telle sorte qu'elle parait liée (plus ou moins...) à la page au lieu d'être liée à la boîte.

Le contournement du bug. Comme le montre le code ci-dessous, nous utilisons deux boîtes emboîtées (nested) pour créer un fond fixe, sans utiliser la règle "background-attachment: fixed" que Gecko ne gère pas correctement.

<div style="width: 100px; border: 4px double blue; background: url('images/image-fond.gif') #FFFFCC 0% 50% repeat-x">
<div style="height: 100px; padding: 2px; font-size: 8pt; overflow: scroll">Dans cette boîte... pour constater l'effet.</div>
</div>

La largeur, le fond et le cadre sont définis dans la boîte conteneur, dont la hauteur s'adaptera au contenu. L'effet de défilement est créé dans la seconde boîte, en limitant la hauteur et en utilisant la propriété OVERFLOW. Utilisez la barre de défilement vertical de la boîte pour vérifier l'effet.

 
Dans cette boîte, nous avons introduit suffisamment de texte pour qu'un débordement vertical se produise, de manière à montrer que le fond reste fixe quand on fait défiler le texte. Il faut posséder un navigateur récent pour constater l'effet.
 

Remarque : on peut utiliser indifféremment "scroll" ou "auto" comme valeur de la propriété OVERFLOW.

Le traitement global du fond. Comme le montre le code ci-dessus, on peut regrouper l'ensemble des déclarations relatives au fond de la boîte à l'aide de l'identificateur BACKGROUND suivi des valeurs adéquates. A ces dernières on pourrait rajouter la valeur "fixed" si le moteur Gecko l'acceptait.

Valeur par défaut :  si l'identificateur BACKGROUND-ATTACHMENT est absent, ou si sa valeur vaut "scroll", le fond défile avec le contenu de la boîte.

 

V-6- Conclusion

La boîte est un bon outil que les feuilles de style mettent à la disposition des concepteurs de sites Web. On peut simplement regretter que la largeur de la boîte s'adapte à celle du conteneur plutôt qu'au contenu. Nous reviendrons sur ce point quand nous traiterons des boîtes "en-ligne".

Pour utiliser pleinement les boîtes, il faut contourner deux bugs :

Ce contournement consiste à rajouter un emboîtement ; il n'est donc pas difficile à réaliser.

Il faut enfin se rappeler que le moteur Gecko ne gère pas le débordement horizontal.

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