DISPLAYING XML USING CSS in Font

Print Data Matrix in Font DISPLAYING XML USING CSS

If you choose the positioning type float, you ll create a floating box. Other content will flow around the box. You can set the float property to either left or right. Floating boxes are treated as block boxes, even if you define them specifically as inline elements. Positioning with float doesn t have the vertical margins collapsed above or below it, unlike normal flow. Instead, the box is aligned with the top of the containing box. Horizontally, it is shifted as far to the left or right of the containing box as is possible. When you use this type of positioning, you should also set a width property indicating how wide the element should be within the containing box. If you don t do this, the floating box will automatically take up 100 percent of the width of the containing box. Because it takes up the maximum space, nothing can flow around it, and it will appear like a nonfloating block-level element. The next example includes a <pullQuote> element. This element floats to the right, taking up 20 percent of the width of its container element. The XML follows: <page> <pullQuote> The remnants of a passage from Cicero's de Finibus Bonorum et Malorum. </pullQuote> <paragraph>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </paragraph> </page>

This document is saved as boxes5.xml, along with boxes5.css, the new stylesheet. The stylesheet contains the following code: paragraph { display:block; padding:10px; border:solid 2px #A3A3A3; } pullQuote { float:right; width:20%; font-style:italic; border:solid 1px #CCCCCC; padding:10px; margin:10px: } Figure 5-8 shows how the floating element appears within a web browser.

Figure 5-8. A floating element One interesting thing to point out here is that it doesn t matter whether the <pullQuote> element appears before or after the <paragraph> element it will still display in the same position within the browser. You can use this technique to present the contents of an XML document in a different sequence from the one it follows within the XML source.

Overlapping Floating Boxes As with relatively positioned boxes, you must be careful about overlapping floating boxes. A floating box can overlap block-level boxes that are in normal flow mode. Figure 5-9 illustrates this point.

Figure 5-9. Floating boxes can overlap, causing an unexpected effect. This example adds another <paragraph> element and increases the text in the <pullQuote> element. You can see the effect is not attractive. The <pullQuote> overlaps the second <paragraph> element. Even if you add another layer of nesting in the XML document, the effect will be the same. The files used in the example are saved as boxes6.xml and boxes6.css. You can stop the <pullQuote> element from overlapping the second paragraph by using the clear property within the second <paragraph> element. However, you must be able to distinguish the second paragraph from the first, so change the element name to <paragraph2>. Then you can add an appropriate declaration to the CSS file: paragraph2 { clear:right; } The clear property indicates which side(s) of an element s box must not be adjacent to an earlier floating box. The property can take the values left, right, both, none, or inherit.

The example files are saved as boxes7.xml and boxes7.css. Figure 5-10 shows the effect of these changes. Note that I ve also added a white background to the <pullQuote> element.