Positioning Shapes

VML uses the same syntax defined in CSS2 to position shapes on a Web page. You can use static, relative, or absolute positioning to determine where the base point is located on a Web page. You can also use the top and left or center-x and center-y style attributes to specify the offset from the base point at which the containing box for the shape will be positioned.

You can also use z-index to specify the z-order of shapes on a Web page. In addition, VML provides rotation and flip to rotate or flip shapes. I'll take a look at a few of the position styles here.

The static Position Style

The default position style is static , which makes the browser insert a shape at the current point in the browser's text flow. Here's an example putting static positioning to work, in which I'm drawing a rectangle following some text:

Listing ch19_09.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Positioning             </H1>             Here is the rectangle:  <v:rect style='width:200pt;height:100pt'   fillcolor="red" strokecolor="green"   strokeweight="4pt"/>  </CENTER>     </BODY> </HTML>

The result appears in Figure 19-9. As you see there, the shape's baseline is aligned with the baseline of the text.

Figure 19-9. Using static positioning.

graphics/19fig09.gif

The relative Position Style

When you use static positioning, a shape is positioned with respect to the current location in the text flow. You can also position shapes relative to the current location in the text flow. To do so, you use the position: relative style and use the top and left style properties.

Here's an example in which I position a shape 30 points to the right of the current text location and 15 points higher:

Listing ch19_10.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Relative Positioning             </H1>             Here is the rectangle:  <v:rect style='position:relative;left:30pt;   top:-15pt;width:200pt;height:100pt'   fillcolor="red" strokecolor="green"   strokeweight="4pt"/>  </CENTER>     </BODY> </HTML>

You can see the result in Figure 19-10. As you see in the figure, the shape is positioned relative to the current text flow location.

Figure 19-10. Using relative positioning.

graphics/19fig10.gif