The CSS Styles

In all the examples shown, I used CSS-like styles such as "font-style", "color", "font-family", and others. The syntax used is an equality pair of CSS style on the left and value on the right. The generated result is a CSS inline style, such as the following:

given: color="green" font-style="italic"

result: style="color:green; font-style: italic"

Most CSS style attributes can be used with XSL, including those for positioning elements, demonstrated next.

The thing about the sidebar XML element is that it implies that the content is laid out side by side with the regular content. For this last demonstration, the CSS positioning attributes "position", "left", "top", and "width" are used to lay out the sidebar and content below the overall page title. The final XSL rules applied to the XML example are in the following block:

 <rule>
    <target-element type="sidebar"/>
     <DIV left="10" width="200" top="90" position="absolute">
	<children/>
     </DIV>
 </rule>

 <rule>
   <target-element type="content"/>
     <DIV left="220" width="400" top="50" position="absolute">
 	<children/>
     </DIV>
 </rule>

Check out the last generated example. Notice how, now, the sidebar and content sections are displayed side by side. Unfortunately, this example does not generate "cleanly" for Navigator 4.x, and the content overlaps. However, it's a start, and a good way to conclude this demonstration of the original, proposed XSL.

If you want to try the examples yourself, you can download a zipped file containing the final XSL and the demo XML file. Try these with msxsl.exe, downloadable from Microsoft, or with the sophisticated XML Styler, downloadable from ArborText. The URLs are in the resource section.

Wildcards
Add a little style to your XML document with XSL - a Working Example
Add a little style to your XML document with XSL - a Working Example: Resources