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 "bloc"           Révision : 26 mai 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(08 mars 2004)

VIII - Les boîtes de type "bloc"

VIII-1- Introduction

Dans les chapitres IV et V, nous avons utilisé la balise DIV pour construire des boîtes et étudier leurs propriétés. De nombreuses autres balises peuvent servir de base à une boîte : HTML, BODY, P, TABLE, SPAN, A, BLOCKQUOTE, H1 à H6, OL, UL, LI, HR, IMG, FORM, etc. Ces différentes balises, dont chacune possède sa spécificité, ne peuvent fonctionner toutes de la même façon vis à vis des styles. Nous nous proposons d'étudier dans ce qui suit le comportement des boîtes construites sur les principales balises du HTML. Nous partons donc à la découverte de ce que nous réservent les navigateurs.

Nous pouvons classer les balises en deux catégories :

Au regard des feuilles de style, l'appartenance d'une balise à l'une des deux catégories n'est pas immuable. La propriété DISPLAY permet en effet de passer d'une catégorie à l'autre, grâce aux valeurs "block" et "inline". Nous reviendrons sur ce point au chapitre X.

 

VIII-2- La balise HTML

Compte tenu de le notion d'héritage, la démarche la plus logique consiste à commencer par la boîte qui contient toutes les autres -- c'est à dire la page Web elle-même.

Dans sa traduction française, la recommandation CSS2 précise : "La racine de l'arbre du document génère une boîte qui fait office de bloc conteneur initial pour les constructions subséquentes." Pour le W3C la racine de l'arbre du document est la balise <HTML>, laquelle nous servira donc de point de départ.

La recommandation du W3C précise également que l'on peut spécifier les dimensions du bloc conteneur initial de l'élément racine grâce aux propriétés "width" et "height".

Par conséquent, et bien que la démarche ne soit pas très courante, nous pouvons attribuer un style à la balise <HTML>, la traiter comme une boîte, et lui donner des dimensions. Le code ci-dessous :

<html style="margin: 5px; border: thick dotted aqua; padding: 10px; background: #FFAAFF url('images/image-fond.gif'); font-family: arial; font-size: 11pt; color: maroon; width: 100px; height: 100px">

génère les affichages suivants sur PC (IE6 conforme à gauche, NS7 à droite), la zone de contenu étant colorée en jaune à l'aide de la balise span :

     
IE6/PC (conforme) NS7/PC
et sur Mac pourvu du système X (IE5 à gauche, NS7 à droite) :
     
IE5/Mac NS7/Mac

Ces figures parlent d'elles-mêmes : rien ne marche correctement dans aucun des deux navigateurs ni sur aucune des deux plates-formes (le moins mauvais cas correspondant à IE5/Mac). Cela explique pourquoi les concepteurs de sites n'attribuent généralement pas de style à la balise <HTML>.

En ce qui concerne la balise HTML, la recommandation du W3C n'est pas raisonnable. Certes, la racine de l'arbre du document possède deux fils, BODY et HEAD, mais le second correspond à des données qui ne sont pas affichées, et rien ne servirait de lui attribuer un style. Le bon sens veut donc que le rôle de bloc conteneur initial soit dévolu à la balise BODY, et c'est ainsi que les choses étaient prévues dans CSS1.

 

VIII-3- La page (BODY)

En appliquant le code précédant à la balise <BODY>, nous obtenons un affichage satisfaisant sur Mac, à ceci près que IE5 applique les dimensions à l'extérieur du cadre et non à la zone de contenu. La figure ci-dessous représente ce que nous obtenons sur PC : en mode natif, IE ne tient compte ni des marges externes ni des dimensions, et il ignore certains types de cadre. Par contre, il applique correctement l'image et la couleur de fond, ainsi que la marge interne.

       
IE6 mode natif IE6 mode conforme NS7/PC

Sur les deux images de droite, nous remarquons que le fond de la boîte s'étend à toute la fenêtre, au lieu d'être confiné à la boîte seule. Ce résultat est conforme à la recommandation du W3C relative au bloc conteneur initial, dont le fond de boîte doit servir de canevas. On appelle canevas la partie de la surface affichée par le navigateur sur laquelle le document est représenté.

On se sert généralement du style de la balise BODY pour :

Rappelons qu'en HTML ou peut fixer les marges internes de la page avec les attributs suivants (dont les navigateurs récents tiennent toujours compte, pour respecter la compatibilité ascendante)  :

<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

La figure suivante représente une barre de défilement agrandie 5 fois. Cinq couleurs distinctes peuvent être attribuées aux deux parties fixes et au curseur mobile, de manière à donner une impression de relief. Une sixième couleur peut être attribuée à la piste du curseur, et une septième couleur aux flèches situées dans les parties fixes.

Cette décoration s'applique non seulement aux barres de défilement de la page, mais aussi à celles qui peuvent apparaître autour de chaque boîte possédant la propriété OVERFLOW avec la valeur "scroll".

 

VIII-4- Le paragraphe (P)

Le paragraphe correspond à la balise P, à laquelle les feuilles de style s'applique généralement bien. En l'absence de style, les navigateurs appliquent des marges hautes et basses auxquelles le concepteur ne peut rien. Sur PC, ces marges ont pour valeur 19 pixels pour IE et 16-17 pixels pour NS, comme le montre la figure suivante :

 
     
 
     
 
      
 
Le paragraphe affiché par IE6/PC Le paragraphe affiché par NS7/PC

Il suffit de préciser que la marge externe est nulle pour que ces espacements disparaissent. Ainsi, au code ci-dessous :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<center><p style=" margin: 0px"><span style="background-color: yellow">Paragraphe 1</span></p></center>
<center><p style=" margin: 0px"><span style="background-color: yellow">Paragraphe 2</span></p></center>
<center><p style=" margin: 0px"><span style="background-color: yellow">Paragraphe 3</span></p></center>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

correspond l'affichage suivant, dans lequel les sauts de ligne ont disparu :

Paragraphe 1

Paragraphe 2

Paragraphe 3

De manière plus précise : pour éviter que les navigateurs affichent une ligne blanche sous un paragraphe, il suffit de rajouter un style à la balise P correspondante, style dans lequel on précise que les marges haute et basse sont nulles.

Tout ce que nous avons exposé à propos des boîtes dans les chapitres précédents, en utilisant la balise DIV, s'applique aussi à la balise P. Exemple de code :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<p style="margin: 4px 20px; border: solid blue 2px; padding: 8px; width: 250px; text-align: justify; font-family: verdana; font-size: 10pt; color: #880022; text-indent: 5%">Ce paragraphe contient un texte qui est assez long pour activer le retour à la ligne.</p>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Ce code s'affiche ainsi :

Ce paragraphe contient un texte qui est assez long pour activer le retour à la ligne.

VIII-5- Les titres

En l'absence de style, les balises titre (H1 à H6) ont pour effet de fixer le corps des caractères, et d'écrire ces derniers en gras. De plus, les navigateurs affublent les titres de marges haute et basse par défaut, comme le montre la figure ci-dessous relative au cas du titre H1, seul ou entouré de paragraphes. Comme pour la balise P, il suffit de créer un style et de déclarer nulles les marges externes, pour que ces espacements disparaissent.

 
     
 
     
 
     
 
Le titre 1 affiché par IE6/PC
 
Le titre 1 affiché par NS7/PC
 
 
     
 
 
     
 
H1 entouré de paragraphes
(IE6/PC)
H1 entouré de paragraphes
(NS7/PC)
Le corps et la graisse peuvent également être modifiés via un style, ce qui fait que l'on peut utiliser une balise de titre comme s'il s'agissait d'une balise P ou d'une balise DIV. Cependant, il est conseillé de réserver les balises de titre pour écrire les titres, de telle sorte que la page ne soit pas trop défigurée si les styles ne s'appliquent pas.
 

VIII-6- Les marges (BLOCKQUOTE)

Le paragraphe dédié aux listes est supprimé. Son contenu fait désormais l'objet du chapitre X.

Le texte relatif aux marges sera mis en ligne au début du mois de juin 2004.

 

VIII-7- La règle horizontale (HR)

La balise HR permet de tracer une ligne (ou règle) horizontale sans avoir recours à une image. Autrefois très utilisée, cette balise est tombée en désuétude. Sur le Web, les modes vont et viennent, et la ligne horizontale apparaît aujourd'hui comme surannée.
En HTML, la balise HR possède quatre attributs (ils sont aujourd'hui déclassés en faveur des styles, mais les navigateurs les reconnaissent toujours) :
Les navigateurs attribuent à la ligne horizontale des marges haute et basse par défaut : 7 pixels dans IE/PC, 8 pixels dans NS/PC. Ces marges se maintiennent quand on attribue un style à la ligne, et la propriété MARGIN ne fonctionne pas. La hauteur, les attributs du cadre, la couleur du fond, ainsi que le positionnement fonctionnent, mais les divers navigateurs (et leurs diverses versions) n'affichent pas la ligne de la même façon. Ce cafouillage ne fait que renforcer la désuétude dans laquelle est tombée la ligne horizontale.
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