Positionnement des formes

Cette rubrique décrit VML, 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 activement maintenu. Pour plus d’informations, consultez Contenu archivé. Pour plus d’informations, des recommandations et des conseils concernant la version actuelle de Windows Internet Explorer, consultez le 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 des formes sur une page Web. Vous pouvez utiliser des valeurs statiques, relatives ou absolues pour déterminer l’emplacement du 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 auquel la zone conteneur de la forme sera positionnée.

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

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

Dans cette rubrique :

statique

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 dans les 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 bytes)

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

back to top Retour en haut

relative

La définition de l’attribut de style de position sur « relative » vous permet de placer la zone conteneur avec un décalage du 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 positionnée comme relative occupe 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 de 10 points du haut par rapport au point actuel dans le flux de texte, comme illustré dans l’image suivante :

shape3.gif (2048 bytes)

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

back to top Retour en haut

absolute

La définition de l’attribut de style de position sur « absolute » vous permet de placer la zone contenant une distance exacte entre le coin supérieur gauche (le point de base) de son élément parent (l’élément positionné qui contient la forme). N’oubliez pas que la zone contenante 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 en haut à gauche de la page Web. La zone contenante de l’ovale est positionnée exactement 20 points à partir de la gauche et de 10 points du haut, par rapport au coin supérieur gauche de la page Web, comme illustré dans l’image suivante :

shape2.gif (2006 bytes)

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

back to top Retour en haut

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 de plan à 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 plus grande valeur d’index z 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 apparaît en haut.

Par exemple, dans la représentation VML suivante, l’ovale rouge s’affiche en haut 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 bytes)

<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 bytes)

<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 bytes)

<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>

back to top Retour en haut

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 au niveau 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.

back to top Retour en haut

flip

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

Valeur Description
x Retourner la forme pivotée sur l’axe y (inverse x ordinates)
y Retourner la forme pivotée sur l’axe x (inverse y ordinates)

 

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 son axe x et y.

back to top Retour en haut

Résumé

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écidez 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 pour la forme.
  5. Utilisez z-index pour spécifier l’ordre z de la forme.