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 boîtes de type "en-ligne"           Révision : 22 avril 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(02 avril 2004)

XI - Les boîtes de type "en-ligne"

XI-1- Introduction

Au chapitre VIII nous avons fait la distinction entre les balises qui permettent de créer des boîtes de type "bloc" et celles qui permettent de créer des boîtes de type "en-ligne" (traduction de l'anglais "inline box" ; on utilise parfois l'expression "flux de texte"). Les secondes sont souvent utilisées à l'intérieur des premières, sinon c'est la page elle-même (BODY) qui leur sert de conteneur. Les boîtes en-ligne se placent bord à bord tant qu'elles disposent de la place nécessaire, remplissant le conteneur à partir du haut. Les plus connues sont SPAN, A et IMG, mais il en existe beaucoup d'autres.

Les boîtes en-ligne sont de deux sortes :

Dans l'exemple suivant, la balise DIV définit un bloc conteneur, tandis que les balises EM et STRONG définissent des boîtes en-ligne (non remplacées) contenant respectivement les textes "mots en italique" et "cette phrase". Les autres parties de texte, soit "Plusieurs" et "appartiennent à" correspondent à des boîtes en-ligne dites anonymes, parce que non définies par des balises.

<div>Plusieurs <em>mots en italique</em> appartiennent à <strong>cette phrase.</strong>

Si le navigateur dispose de la place nécessaire, il place ces quatre boîtes les unes à côté des autres, dans ce que l'on appelle une boîte de ligne (en anglais : line-box). Dans le cas contraire, il découpe les boîtes en-ligne et les répartit sur plusieurs boîtes de ligne placées les unes en dessous des autres.

En l'absence de tout style, le code ci-dessous affiche le texte suivant :

Plusieurs mots en italique appartiennent à cette phrase.
 

XI-2- Le fonctionnement des boîtes en-ligne non remplacées

Dans l'exemple suivant, nous attribuons un style à la balise STRONG, et nous entourons la boîte DIV de deux traits noirs horizontaux pour mettre en évidence les marges externes :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<div>Plusieurs <em>mots en italique</em> appartiennent à <strong style=" margin: 10px; border: solid 3px blue; padding: 10px; background-color: yellow ">cette phrase.</strong></div>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Nous obtenons l'affichage suivant (qu'il s'agisse de IE6 ou de NS7, la différence est minime) :

Plusieurs mots en italique appartiennent à cette phrase.

Il apparaît clairement que le navigateur ne règle pas de lui-même la hauteur de la boîte de ligne en fonction de son contenu -- un résultat conforme à la recommandation CSS2. Il appartient au concepteur de fixer lui-même cette hauteur à l'aide de la propriété LINE-HEIGHT, comme le montre le code suivant :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<div>Plusieurs <em>mots en italique</em> appartiennent à <strong style="margin: 10px; border: solid 3px blue; padding: 10px; background-color: yellow; line-height:50px ">cette phrase.</strong></div>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Ce code s'affiche ainsi :

Plusieurs mots en italique appartiennent à cette phrase.

On notera que la propriété LINE-HEIGHT peut être attribuée indifféremment à la balise du conteneur (DIV) ou à celle de la boîte en-ligne (STRONG) sans que l'affichage en soit modifié.

La figure ci-dessous montre ce qui se passe lorsqu'on réduit la largeur de la fenêtre du navigateur, forçant ce dernier à découper la boîte en-ligne et à la répartir sur deux niveaux, conformément à la recommandation CSS2. Le même résultat est obtenu avec NS7 sur PC.

 
  Découpe de la boîte en-ligne    
 
 
  Passage à la ligne de la boîte en-ligne    
 
Boîte en-ligne coupée (IE6/PC) Boîte en-ligne non coupée (IE6/PC)

On remarque que le fait d'avoir donné à la boîte de ligne une hauteur suffisante entraîne que le passage à la ligne s'effectue sans problème, du moins avec IE6 et NS7 sur PC. Avec IE5 sur Mac, le découpage de la boîte se fait mal. A cette exception près, la propriété LINE-HEIGHT règle donc correctement l'interlignage lors du passage à la ligne.

Attention ! L'utilisation de la valeur "normal" de la propriété LINE-HEIGHT, qui confie au navigateur le soin de régler au mieux la hauteur de la boîte de ligne, conduit en pratique à un résultat désastreux.

 

XI-3- Les propriétés des boîtes en-ligne non-remplacées

La zone de contenu. Cette zone est définie de la même façon pour les boîtes en-ligne que pour celles de type bloc.

Les marges externes. Comme le montrent les exemples ci-dessous, lorsque la marge est nulle, le navigateur écarte un peu les mots pour laisser de la place au cadre de la boîte en-ligne ; lorsque la marge n'est pas nulle, son effet se fait sentir uniquement à gauche et à droite du cadre uniquement. Pour une boîte en-ligne non-remplacée, les marges externes haute et basse n'existent pas.

Dans cette phrase. Dans cette phrase. Dans cette phrase.
Marge externe : nulle Marge externe : 5px Marge externe : 10px

On notera que la valeur de marge indiquée dans le style est augmentée de 2 pixels (environ) par le navigateur. Il n'y a pas fusion des marges horizontales, ce qui est conforme aux recommandations CSS2.

Les marges internes. Comme le montrent les exemples ci-dessous, les marges internes fonctionnent normalement dans une boîte en-ligne.

Dans cette phrase. Dans cette phrase. Dans cette phrase.
Marge interne : nulle Marge interne : 5px Marge interne : 10px

Les dimensions. Comme le montre l'exemple ci-dessous, le navigateur de Microsoft implémente les propriétés WIDTH et HEIGHT, mais pas les navigateurs utilisant le moteur Gecko. Certes, ce dernier respecte les spécifications du W3C relatives aux boîtes en-ligne non-remplacées, mais on ne peut que le regretter. Le code suivant :

<p>A-<strong style="background-color: yellow; width: 50px; height: 30px; text-align: center">Inline box</strong>-A</p>
<p>A-<strong style="background-color: yellow; width: 50px; text-align: center">Inline box</strong>-A</p>

s'affiche ainsi sur PC, dans les deux navigateurs :

 
     
 
 
     
 
IE6/PC NS7/PC

Par conséquent, pour régler la largeur et la hauteur d'une boîte en-ligne, il faut s'appuyer sur son contenu et rajouter des marges internes.

Le traitement du fond. Les deux navigateurs traitent correctement les fonds (couleur et/ou image), à une exception près. En effet, le navigateur de Netscape est incapable -- dans une boîte en-ligne -- de superposer correctement une image (partiellement transparente, pour laisser voir le fond) et une image de fond. On constate que cette dernière ne s'affiche pas à la bonne place, et que le pavage ne s'effectue pas correctement. La solution consiste à transformer la boîte de type "en-ligne" en boîte de type "bloc" grâce à la propriété DISPLAY. Nous reviendrons sur ce point au chapitre suivant.

 

XI-4- Les boîtes en-ligne remplacées

Les balises servant de base aux boîtes remplacées peuvent être classées en deux catégories :

La balise EMBED, bien que ne faisant pas partie officiellement du HTML, est reconnue par tous les navigateurs, et son usage est incontournable. La balise OBJECT, bien que reconnue officiellement par le W3C, ne fonctionne pas dans le moteur Gecko, et nous ne l'étudierons pas plus avant. En définitive, nous ne traiterons ici que des balises IMG et EMBED.

Les boîtes en-ligne remplacées ont des propriétés qui les raprochent beaucoup des boîtes de type bloc, à ceci près qu'elles ne générent pas de retour à la ligne. Elles se distinguent des boîtes en-ligne non remplacées par le fait qu'elles ne sont pas sécables. Il n'est pas question, par exemple, de couper une image en deux pour faciliter un retour à la ligne !

Les boîtes en-ligne remplacées possèdent des marges internes et externes, un cadre, des dimensions, une couleur et/ou une image de fond -- dans la mesure où les navigateurs veulent bien implémenter correctement toutes ces propriétés.

La balise IMG. Considérons le code suivant :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<img style="border: 3px double blue; padding: 5px; margin: 20px 0; width: 300px; height: 179px; background: yellow" src="../images/col.jpg">
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

La figure ci-dessous montre ce que l'on obtient dans IE6 et avec un navigateur à moteur Gecko (Mozilla 1.6), sur PC. Nous voyons tout de suite que le navigateur de Microsoft n'implémente pas la marge interne. De ce fait, on ne voit pas la couleur jaune du fond. De plus, il rajoute 4 pixels à la marge basse... Le navigateur Gecko, par contre, implémente correctement toutes les propriétés, y compris celles de l'image de fond si on en utilise une.

 
     
 
 
     
 
Boîte IMG dans IE6/PC Boîte IMG dans Mozilla 1.6/PC

Pour faire en sorte d'obtenir le même affichage dans les deux navigateurs, nous n'avons guère le choix. La solution la plus simple consiste à placer l'image dans une cellule de tableau. Les marges externes sont attribuées à la balise TABLE, les marges internes et les propriétés du fond à la balise TD. Le résultat obtenu figure ci-dessous. Les propriétés des marges, du cadre et du fond sont scrupuleusement respectées.

La balise EMBED. Le navigateur de Microsoft traite la balise EMBED exactement comme la balise IMG. Les navigateurs à moteur Gecko, pour leur part, n'appliquent pas de style à la balise EMBED. Comme précédemment, pour obtenir un affichage indépendant du navigateur, il faut utiliser une cellule de tableau. Le résultat obtenu figure ci-dessous (le module externe Flash est requis -- version 5 ou ultérieure).

 

 

XI-5- La balise A et les pseudo-classes de lien

En HTML, on peut modifier la couleur d'un lien en fonction de son état (non visité, activé, visité) grâce aux attributs LINK, ALINK et VLINK de la balise BODY. Par contre, pour modifier un lien survolé par le curseur de la souris, il faut recourir à un script côté client (script généralement écrit en JavaScript).

Les feuilles de style permettent non seulement de modifier l'aspect d'un lien dans le cas où son état change. Pour ce faire, on utilise les pseudo-classes, ce qui requiert l'usage d'un style interne ou externe. Le code situé plus bas contient trois pseudo-classes -- respectivement " :link ", " :active " et " :visited" -- relatives à la balise a.

Modifier la couleur d'un lien en fonction de son état n'est pas une opération recommandable. Les navigateurs le font par défaut, et le jeu de couleurs correspondant est inscrit dans le subconscient des internautes. Il est inutile, et même nuisible, de perturber les visiteurs d'un site en modifiant ces couleurs, qui sont :

Par contre, tout en conservant les couleurs précédentes, on peut modifier l'aspect du lien, comme le montre le code suivant :

<head>
<style>
a        { text-decoration: none; padding: 2px 6px; font-family: arial; font-weight: bold }
a:link   { border: 4px double blue; color: blue; background: #FFFFAA }
a:active { border: 4px double red; color: red; background: #EEEEFF }
a:visited{ border: 4px double purple; color: purple; background: #EEFFEE }
</style>
</head>
 
<body>
<div align="center"><a href="sommaire.htm">Lien</a></div>
</body>

Vous pouvez tester le fonctionnement de ce style sur le lien suivant (qui ouvre le sommaire dans une page séparée) :

Lien

Remarque : la pseudo-classe " :visited " ne fonctionne pas avec une ancre (lien vers une zone de la page en cours) dans le moteur Gecko.

Les styles permettent également de modifier l'état d'un lien lorsqu'il est survolé par le curseur. Cette possibilité faisait déjà partie de la recommandation CSS1 et, dans CSS2, elle a été étendue à toutes les balises -- mais Internet Explorer n'en tient pas compte. Il en résulte que l'on peut modifier l'aspect d'un lien survolé, mais qu'on ne peut pas créer de menu déroulant, comme nous l'avons déjà signalé au chapitre II. Les effets de survol sont traités dans le chapitre XII.

 

XI-6- Le changement de type (DISPLAY)

Comme nous venons de le voir au paragraphe 3, nous avons été amenés (pour contourner un bug de NS) à transformer une boîte -- basée sur la balise A et donc de type "en-ligne" -- en une boîte de type "bloc". Mais il peut arriver que nous soyons amenés à réaliser l'opération inverse, comme le montre l'exemple suivant.

Les geeks des feuilles de style, qui n'aiment pas les tableaux invisibles, ont lancé une mode qui consiste à réalise les menus à partir de listes. Comme les éléments d'une liste constituent des boîtes de type "bloc", la réalisation d'un menu disposé horizontalement requiert que l'on transforme ces éléments en boîtes de type "inline", afin qu'ils se disposent sur une même ligne.

A titre d'exemple, nous avons réalisé sur ce modèle un menu qui ressemble à celui figurant en haut de la présente page Web. Voici le code correspondant :

<head>
<style>
.M { margin: 0; padding: 0; list-style-type: none; font-family: Comic Sans MS; font-size: 10pt}
.M li { display: inline; margin: -1px }
.M a { text-decoration: none; padding: 0 2px 0 8px; background: url('images/menu-css-1_14_ps8.gif') }
.M a:hover { background-image: url('images/menu-css-2_23_ps8.gif'); color: white }
</style>
</head>
 
<body>
<ul class="M">
<li><a href="../../accueil.htm">Accueil</a></li>
........................................................
<li><a href="../../icg/Base/DataBase.html">Base</a></li>
</ul>
</body>

Ce code mérite quelques explications :

Le résultat obtenu figure ci-dessous (les liens sont actifs) :

Personnellement, nous préférons largement utiliser un tableau invisible pour réaliser un menu horizontal, parce qu'un tel tableau nous offre plus de souplesse dans la réalisation, et parce que nous sommes sûrs que tous les internautes verrons bien le menu... horizontalement, quel que soit le navigateur qu'ils utilisent. Nous reconnaissons cependant que le code obtenu avec une liste est plus léger et plus compact.

Remarque : la manière que nous avons utilisée pour exprimer le style ci-dessus diffère quelque peu de celle dont nous nous sommes servis jusqu'à présent. L'expression ".M li" constitue un sélecteur de descendance. Il signifie que les règles correspondantes s'appliquent à toute boîte LI appartenant à la hiérarchie d'une boîte à laquelle est attribué le sélecteur ".M". L'espace compris entre ".M" et "li" est appelé combinateur, et sa présence est indispensable (mais plusieurs espaces jouent le même rôle qu'un seul). Les expressions ".M a" et ".M a:hover" constituent également des sélecteurs de descendance.

 

XI-7- Conclusion

Les boîtes en-ligne différent des boîtes de type bloc sur de nombreux points, dont voici les principaux :

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