Les blocs dans une page
HTML et le flux naturel

Page précédente

Avertissement : on s'occupera essentiellement d'aspects qualitatifs dans cette page, pas de codage explicite. On rencontrera néammoins beaucoup de fragments de codes ici et là, mais espérons-le, sous une forme qui paraîtra intuitive au lecteur, même s'il ne sera pas encore en mesure de les organiser de manière opérationnelle (patience :-).

Introduction

Dans le modèle des feuilles de style, tous les éléments d'une page HTML se coulent dans des blocs (ou «boîtes») rectangulaires. Un bloc typique est représenté ci-dessous :

schéma de boîte

A partir de l'extérieur, on rencontre successivement 4 zones

  1. Une marge externe (margin), toujours transparente, avec des épaisseurs réglables côté par côté ;
  2. Une bordure (border), dont on peut régler l'épaisseur, la couleur et le style côté par côté ;
  3. Une marge interne (padding), ou «espacement», d'épaisseur réglable côté par côté ;
  4. Enfin, l'espace dévolu au contenu du bloc. Si on utilise une couleur ou une image de fond, cette couleur ou cette image s'appliquent à la fois à ce contenu et aux marges internes.
Dans DW2, on règle tous ces paramètres dans la boîte de dialogue Définition du style pour... et ses 8 volets :

Attention ! les paramètres de hauteur et largeur ainsi définis (ou les width et height si on code à la main) n'ont pas la même signification dans tous les navigateurs, à la suite d'une non-conformité entre les Explorer et les recommandations des CSS. Nous reviendrons à plusieurs reprises sur cette difficulté et nous lui consacrons un article séparé.


(retour au menu)

Le flux naturel

Si nous omettons la possibilité des calques (que nous introduirons plus loin), tous ces blocs se placent
   — soit les uns à côté des autres,
   — soit les uns dans les autres,
c.à.d. il n'y a pas de chevauchement partiel. Le flux naturel (ou «flot» naturel) est tout simplement la façon dont ces blocs s'agencent. Il s'agit de quelque chose d'assez intuitif, mais dont la description précise est passablement longue. Nous essaierons d'en rester au plan intuitif dans ce qui suit.

L'emboîtement possible des blocs les uns dans les autres est une notion fondamentale. Le corps de la page tout entière (le body, en jargon HTML) est un bloc particulier, qui contient tous les autres, et il est lui même contenu dans la fenêtre du navigateur. Les différents éléments de la page forment donc une hiérarchie qu'on peut décrire avec le vocabulaire des relations familiales :

Le flux naturel concerne donc l'agencement des blocs frères les uns par rapport aux autres. On est alors amené à distinguer deux sortes d'agencements :

Nous allons détailler ces deux cas dans les sections suivantes.


(retour au menu)

Les boîtes flottantes (ou blocs flottants)

On peut faire flotter une figure, une table ou un bloc DIV à droite avec float:right

Les feuilles de style ont naturellement repris la possibilité qu'on avait en HTML classique de faire couler le texte autour des figures ou des tables (on parlait alors d'éléments alignés à gauche ou à droite). Avec les feuilles de style, on peut aussi le faire couler autour de blocs DIV qui peuvent contenir un peu n'importe quoi (comme dans l'exemple ci-dessus). Ces éléments peuvent flotter soit à gauche, soit à droite, et le texte reprend par dessous ce bloc.

Cet effet s'obtient en ajoutant une instruction float:right ou float:left au style de l'élément flottant (ou en cochant dans les cases appropriées des boîtes de dialogue de Dreamweaver :-)

image

On peut même avoir simultanément deux blocs flottants, l'un à doite et l'autre à gauche image avec un texte qui coule au milieu. Dans le cas d'une figure, on peut même faire flotter la figure à l'intérieur du paragraphe en insérant la figure au milieu de celui-ci (mais bien évidemment, comme on ne maîtrise la longueur des lignes, on ne peut pas savoir exactement à quel niveau la figure va s'insérer)

Il est beaucoup plus risqué d'essayer de faire flotter une table à l'intérieur d'un paragraphe (ça marche pour IE5-mac, mais pas pour NN6). Et ce n'est probablement pas possible pour un bloc DIV, du moins pas dans un vrai paragraphe (c.à.d. fait avec une balise <P>) ; on peut néammoins avoir le même résultat par une autre méthode, mais c'est une autre histoire :-).

(retour au menu)

Arrêt du flottement

Comme en HTML classique, le texte coule jusqu'à ce qu'on arrive en bas du bloc flottant, même si on change de paragraphe. On a parfois besoin d'arrêter ce flottement et de décaler le nouveau paragraphe suffisamment vers le bas pour qu'il puisse occuper tout l'espace en dessous du bloc flottant. En d'autres termes, on veut du équivalent au <br clear> du HTML classique.

Cela se fait en dotant le nouveau paragraphe d'une nouvelle propriété de style, «clear», qui peut prendre diverses valeurs :
   — clear:left pour se dégager d'un bloc flottant à gauche
   — clear:right pour se dégager d'un bloc flottant à droite
   — clear:both pour se dégager de tout bloc flottant, que ce soit à gauche ou à droite

Une quatrième valeur clear:none correspond au style par défaut, et autorise le flottement sur les deux côtés.

Dans Dreamweaver, ces options s'obtiennent dans le volet «Boîte» de la boîte de dialogue «Définition du style» ; les options pour le flottement (float) correspondent à la case Flottante et celles pour l'arrêt (clear) à la case Effacer (encore une francisation lamentable...)

L'illustration suivante montre l'effet obtenu :
image Ce premier paragraphe court le long d'une image flottant sur la droite.

Avec un style="clear:right", le paragraphe suivant démarre en dessous de l'image flottante et il s'étend sur toute la largeur disponible.


(retour au menu)

Le flux naturel en ligne

L'existence des blocs flottants montre que les paragraphes sont plus compliqués qu'un simple bloc rectangulaire dans lequel on vient disposer du texte. D'autre part, le contenu de ces «paragraphes» va bien au delà d'une simple suite de caractères :

On est donc amené à constater qu'un «texte» est en fait constitué d'une succession de différents éléments correspondant chacun à un style particulier (par exemple, du texte normal, puis un passage en italique, puis une image incluse dans le texte, puis le retour au texte normal, etc...). On appelle ces différents éléments des blocs en ligne, et les règles concernant leur agencement constitue le flux naturel en ligne.

Le plus simple pour comprendre ce qui se passe est d'imaginer que le texte va se répartir en autant de boîtes de ligne qu'il le faudra. Une boîte de ligne est l'espace occupé par une ligne sur l'écran. Ses seuls paramètres sont sa largeur et sa hauteur et ils sont réglés automatiquement :

Le navigateur utilise autant de boîtes de ligne qu'il le faudra pour afficher tous les blocs en ligne constituant le texte. Naturellement, un bloc en ligne trop long sera coupé sur autant de lignes que nécessaire. Enfin, l'arrangement des espaces bouche-trou sur une ligne sera régi par les paramètres de justification (justification à gauche, à droite, centrée, ou totale).

(retour au menu)

L'alignement vertical (en ligne)

Il reste à régler un dernier problème : quand deux blocs en ligne se suivent avec des hauteurs différentes, la boîte de ligne correspondante prend la plus grande des deux hauteurs, mais comment se place le texte dans une boîte devenue trop haute ?

Normalement une ligne de texte s'affiche dans sa boîte de ligne de manière à ce qu'il y ait autant d'espace en dessus des caractères qu'en dessous. Si la ligne contient deux blocs en ligne de texte mais avec des hauteurs différentes, le navigateur se débrouille pour que tous les caractères aient la même ligne de base... à moins qu'on ne le force à faire autrement, comme expliqué ci-dessous.

Le cas délicat correspond à l'inclusion d'une image dans du texte (ou de tout autre bloc en ligne qui exige une hauteur accrue). Dans ce cas, la position de la ligne de texte est régie par la propriété de style «alignement vertical» (vertical-align) allouée à l'image ou au bloc inclus (dans Dreamweaver, on atteint cette propriété dans le volet «Bloc» de la boîte de dialogue «Définition du style»)

Cette propriété peut prendre les 6 valeurs principales ci-dessous :
baseline / middle / top / bottom / sub / super
On propose aussi les valeurs text-top ou text-bottom, mais l'effet sur un bloc image est apparemment le même qu'avec top ou bottom (et les explications officielles ne sont pas claires) . Enfin, les CSS2 prévoient aussi d'exprimer le vertical-align en pourcentage, mais... il est pour le moins prématuré de s'en servir, au vu de l'effet observé avec IE5-mac, pas du tout conforme aux explications officielles (et l'effet avec NN6, quoique plus raisonable, ne semble guère plus conforme).

Les illustrations ci-dessous montrent ce qu'il est possible d'obtenir :

Image image de test en vertical-align:baseline : même ligne de base pour l'image et le texte

Image image de test en vertical-align:middle : même ligne médiane pour l'image et le texte

Image image de test en vertical-align:top : même ligne pour le haut de l'image et le haut du texte (plus précisément le haut de sa boîte de texte normale)

Image image de test en vertical-align:bottom : même ligne pour le bas de l'image et le bas du texte

Image image de test en vertical-align:sub : le bas de l'image vient au niveau des indices pour le texte (c.à.d. un peu plus bas par rapport au texte qu'avec le vertical-align:bottom précédent).

Image image de test en vertical-align:super : le bas de l'image vient au niveau des exposants pour le texte.

Notez que les valeurs super et sub pourraient être utilisées pour écrire du texte en exposant ou bien en indice, mais comme elles ne modifient pas du tout la taille de la police, il vaut mieux utiliser les balises HTML classiques <SUB> et <SUP> pour cela, quitte à les redéfinir dans des feuilles de style si le rendu par défaut ne vous pla&icirc;t pas (comme ici pour des exposants ou pour des indices).


(retour au menu)

La propriété display

Il est finalement assez intuitif de voir si un élément donné d'une page HTML relève du flux général vertical dans la page ou du flux horizontal dans un bloc de texte. Si on veut néammoins forcer tel ou tel comportement, on peut faire appel à la propriété de style display (inaccessible depuis Dreamweaver). Les valeurs les plus importantes — à notre avis — pour cette propriété sont numérées ci-après (cliquez dessus pour voir l'effet sur le passage précédent avec le fond jaune) :
  display:inline : force l'affichage en ligne
  display:block : force un affichage en flux vertical, c.à.d. avec des retours à la ligne avant et après l'élément.
  display:none : supprime totalement l'affichage de l'élément.

Il y a de nombreuses autres valeurs possibles pour cette propriété display, mais nettement plus ésotériques (en dehors de display:list-item qui permet de réafficher un article de liste (<LI>) qu'on aurait fait disparaître avec un display:none). On se reportera au texte officiel du W3C pour en savoir plus.

La faculté de faire ainsi disparaître ou réapparaître les éléments d'une page offre naturellement des perspectives intéressantes pour l'animation des pages. Nous avons exposé ailleurs en détail plusieurs applications, notamment la constitution de menus glissants remarquablement simples.


Retour en haut
Accueil des réponses
Page suivante :
les calques