Positionnement des formes

Cette rubrique décrit VML, une fonctionnalité déconseillée à partir de Windows Internet Explorer 9. Les pages web et les applications qui s’appuient sur VML doivent être migrées vers SVG ou d’autres normes largement prises en charge.

Notes

Depuis décembre 2011, cette rubrique a été archivée. Par conséquent, il n’est plus géré activement. Pour plus d’informations, consultez Contenu archivé. Pour plus d’informations, de recommandations et d’aide sur la version actuelle de Windows Internet Explorer, consultez Centre de développement Internet Explorer.

 

Vous avez appris à dessiner et à colorer des formes sur une page web à l’aide de VML. Dans cette rubrique, vous allez utiliser VML pour positionner précisément des graphiques sur une page web.

VML utilise la même syntaxe définie dans les sections Box Model et Visual Rendering Model de CSS2 pour positionner les formes sur une page web. Vous pouvez utiliser statique, relatif ou absolu pour déterminer où se trouve le point de base sur une page web. Vous pouvez ensuite utiliser les attributs de style supérieur et gauche pour spécifier le décalage à partir du point de base à partir duquel la zone contenante de la forme sera positionnée.

Vous pouvez également utiliser z-index pour spécifier l’ordre z des formes sur une page web.

En outre, VML fournit une rotation et un retournement pour faire pivoter ou retourner les formes.

Dans cette rubrique :

static

Le style de position par défaut est statique, ce qui indique aux navigateurs de positionner la forme au point actuel (point de base) dans le flux de texte et d’ignorer les paramètres des attributs de style supérieur et gauche .

Par exemple, dans la représentation VML suivante, l’ovale rouge est positionné immédiatement après le texte « Début de la forme : », comme illustré dans l’image suivante :

shape1-ps.gif (2123 octets)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

retour en haut de la page Retour en haut de la page

relative

La définition de l’attribut de style de position sur « relative » vous permet de placer la zone contenante avec un décalage par rapport au point actuel (le point de base) dans le flux de texte. Le décalage est déterminé par les paramètres des attributs de style supérieur et gauche . N’oubliez pas que la zone contenante qui est positionnée comme relative prend de l’espace dans le flux de texte.

Par exemple, dans la représentation VML suivante, l’ovale rouge est positionné à 20 points à partir de la gauche et à 10 points du haut par rapport au point actuel dans le flux de texte, comme illustré dans l’image suivante :

shape3.gif (2 048 octets)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

retour en haut de la page Retour en haut de la page

absolute

La définition de l’attribut de style de position sur « absolute » vous permet de placer la zone contenante à une distance exacte du coin supérieur gauche (point de base) de son élément parent (l’élément positionné qui contient la forme). N’oubliez pas que la zone contenante qui est positionnée comme absolue ne prend pas d’espace dans le flux de texte.

Par exemple, dans la représentation VML suivante, l’ovale rouge est contenu dans l’élément <body> (la page Web entière) ; par conséquent, le point de base se trouve dans le coin supérieur gauche de la page web. La zone contenante de l’ovale est positionnée exactement à 20 points de la gauche et à 10 points du haut, par rapport au coin supérieur gauche de la page Web, comme illustré dans l’image suivante :

shape2.gif (2006 octets)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

retour en haut de la page Retour en haut de la page

z-index

Il est possible de positionner une forme qui chevauche une autre forme. Normalement, le graphique répertorié en dernier dans le code HTML apparaît en haut.

Dans VML, vous pouvez contrôler l’ordre z à l’aide de l’attribut de style z-index . La valeur de cet attribut peut être zéro, un entier positif ou un entier négatif. Le graphique qui a une valeur z-index plus grande s’affiche au-dessus du graphique qui a une valeur d’index z plus petite. Lorsque les deux graphiques ont la même valeur z-index, le graphique répertorié en dernier dans le code HTML s’affiche en haut.

Par exemple, dans la représentation VML suivante, l’ovale rouge s’affiche au-dessus du rectangle bleu. En effet, la valeur z-index de l’ovale rouge est supérieure à la valeur z-index du rectangle bleu.

shape4.gif (572 octets)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

Si vous modifiez l’index z, comme indiqué dans la représentation VML suivante, l’ovale rouge se déplace derrière le rectangle bleu.

shape5.gif (469 octets)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

Si vous fournissez un entier négatif, vous pouvez utiliser z-index pour positionner les graphiques derrière le flux de texte normal, comme indiqué dans la représentation VML suivante.

shape6.gif (2125 octets)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

retour en haut de la page Retour en haut de la page

rotation

Vous pouvez utiliser l’attribut de style de rotation pour spécifier le nombre de degrés que vous souhaitez qu’une forme active sur son axe. Une valeur positive indique une rotation dans le sens des aiguilles d’une montre ; une valeur négative indique une rotation dans le sens inverse des aiguilles d’une montre.

Par exemple, si vous spécifiez style='... rotation:90', vous pouvez faire pivoter la forme de 90 degrés dans le sens des aiguilles d’une montre.

retour en haut de la page Retour en haut de la page

flip

Vous pouvez utiliser l’attribut flip style pour retourner une forme sur son axe x ou y en fonction du tableau suivant :

Valeur Description
x Retourner la forme pivotée autour de l’axe y (inverser les ordinates x)
y Retourner la forme pivotée autour de l’axe x (ordinates y inversés)

 

X et y peuvent être spécifiés dans la propriété flip.

Par exemple, si vous tapez style='... flip:x y', vous allez retourner la forme sur ses axes x et y.

retour en haut de la page Retour en haut de la page

Récapitulatif

En fonction de ce que vous avez appris, vous pouvez positionner précisément une forme sur une page Web en procédant comme suit :

  1. Déterminez l’emplacement où vous souhaitez que la forme apparaisse sur une page web et la taille de la forme.
  2. Spécifiez style='position:relative (ou relative)' pour déterminer le point de base.
  3. Utilisez la gauche et le haut pour spécifier le décalage à partir du point de base.
  4. Utilisez la largeur et la hauteur pour spécifier la taille de la zone contenante de la forme.
  5. Utilisez z-index pour spécifier l’ordre z de la forme.