 |
 Positionnement vertical sur la ligne de texte |
|
|
|
Connexion ratee
|
|
Le HTML ne permet que deux décallages verticaux par rapport à la ligne de base du texte, mais les feuilles de style en permettent
bien davantage : huit exactement (plus deux non encore supportés).
Cela permet de créer des indices, des exposants, ou une présentation spécifique. |
|
|
|
|
|
La propriété utilisée pour positionner verticalement un morceau de texte par rapport au texte qui l'entoure est :
'vertical-align'. Elle doit être appliquée au sein d'une ligne de texte par le biais d'une balise '<span>'.
Aucune des mise en forme qui suivent n'est reconnue par Netscape 4.x dans ce cadre.
Cette propriété peut prendre 8 valeurs différentes :
- vertical-align: top : le haut du texte vient toucher le point le plus haut de la ligne,
- vertical-align: super : le texte se surélève légèrement,
- vertical-align: baseline : c'est la position par défaut sur la ligne de texte,
- vertical-align: middle : sur Internet Explorer, identique à baseline, sur Netscape 6.x, le texte s'abaisse
légèrement (identique à sub),
- vertical-align: sub : le texte s'abaisse légèrement (davantage sous Internet Explorer que sous Netscape 6.x),
- vertical-align: bottom : le bas du texte vient toucher le point le plus bas de la ligne,
- vertical-align: XX% : le positionnement se calcule en pourcentage de la hauteur du texte précédent la mise en forme (positif
ou négatif), inopérant sur Internet Explorer,
- vertical-align: XXpx : le positionnement se détermine en pixels par rapport à la ligne de base (positif ou négatif),
inopérant sur Internet Explorer,
Les deux valeurs non-encore reconnues par Internet Explorer Netscape 6.x et Opera sont 'text-top' et 'text-bottom'.
Attention : l'utilisation de la propriété 'vertical-align' dans un 'bloc' (cellule de tableau, 'div') n'a pas du
tout le même effet !
Dans un bloc, cette propriété n'accepte plus que 3 valeurs différentes : 'top', 'middle' et
'bottom' qui ont le même effet qu'en HTML pour la propriété 'valign'. La totalité du contenu
s'aligne donc au sein même du bloc. |
|
|
|
|
|
 |
|
 |
|
Ceci est un texte normal... : __________ : (top)
Ceci est un texte normal... : __________ : (top)
Ceci est un texte normal... : __________ : (super)
Ceci est un texte normal... : __________ : (baseline)
Ceci est un texte normal... : __________ : (middle)
Ceci est un texte normal... : __________ : (sub)
Ceci est un texte normal... : __________ : (bottom)
Ceci est un texte normal... : __________ : (bottom)
Netscape 6.x et Opera 5.x et supérieurs uniquement :
Ceci est un texte normal... : __________ : (150%)
Ceci est un texte normal... : __________ : (-20px)
|
|
|
 |
|
 |
|
|
|
|
|
|
|
