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 :
<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>
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 :
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>
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 :
<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>
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.
<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.
<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.
<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>
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.
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.
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 :
- Déterminez l’emplacement où vous souhaitez que la forme apparaisse sur une page web et la taille de la forme.
- Spécifiez style='position:relative (ou relative)' pour déterminer le point de base.
- Utilisez la gauche et le haut pour spécifier le décalage à partir du point de base.
- Utilisez la largeur et la hauteur pour spécifier la taille de la zone contenante de la forme.
- Utilisez z-index pour spécifier l’ordre z de la forme.
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : tout au long de 2024, nous allons éliminer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d'informations, consultez :Envoyer et afficher des commentaires pour