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 :
A partir de l'extérieur, on rencontre successivement 4 zones
margin), toujours
transparente, avec des épaisseurs réglables
côté par côté ;border), dont on peut régler l'épaisseur,
la couleur et le style côté par côté ;padding), ou «espacement»,
d'épaisseur réglable côté par côté ; 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é.
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 :
UL) forme
un bloc qui est l'ancêtre de chacun de ses articles
(balise LI).
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.
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 :-)
On peut même avoir simultanément deux blocs flottants, l'un à doite et
l'autre à gauche
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)
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 :-).
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...)
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.
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 :
avec des phrases avant et
après l'image. Ces images restent là où on les a mises
dans le flux du texte (c.à.d. elles ne «flottent» pas par
rapport aux mots qui les entourent). 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 :
line-height) alloué à ce texte.
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»)
baseline / middle / top / bottom /
sub / supertext-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 :
en vertical-align:baseline :
même ligne de base pour l'image et le texte
Image
en vertical-align:middle :
même ligne médiane pour l'image et le texte
Image
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
en vertical-align:bottom :
même ligne pour le bas de l'image et le bas du texte
Image
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
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ît pas
(comme ici pour des exposants ou pour des
indices).
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.