Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 28th of September 2016 08:42:35 PM

9.4. Fixed Positioning

As implied in the previous section, fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. In this case, the element is totally removed from the document's flow and does not have a position relative to any part of the document.

This can be exploited in a number of interesting ways. First off, element may be floated. Note that, for elements such as paragraph,floating the element will cause its width to tend toward zero unlessan explicit width is assigned; thus, width assignment is a crucialpart of floating any nonreplaced element.

Example

IMG {float: left;}

Values

left | right |none it's possible to create frame-style interfaces using fixed positioning. Consider Figure 9-24, which shows a very common layout scheme.

Figure 9-24

Figure 9-24. Emulating frames with fixed positioning

This could be done using the following styles:

DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver;}

This will fix the header and sidebar to the top and side of the viewport, where they will remain regardless of how the document is scrolled. The drawback here, though, is that the rest of the document will be overlapped by the fixed elements. Therefore, the rest of the content should probably be contained in its own DIV and employ the following:

DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white;}

It would even be possible to create small gaps between the three positioned DIVs by adding some appropriate margins, demonstrated in Figure 9-25:

BODY {background: black; color: silver;}  /* colors for safety's sake */
DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray; margin-bottom: 2px; color: yellow;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver; margin-right: 2px; color: maroon;}
DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white; color: black;}
Figure 9-25

Figure 9-25. Separating the "frames"

Given such a case, a tiled image could be applied to the BODY background. This image would show through the gaps created by the margins, which could certainly be widened if the author saw fit. For that matter, if a background image was of little importance, simple borders could be applied to the DIVs instead of margins.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

Your code (in the Java application layer) has to make use of the DOM or SAX API and the XML parser in order to access the information in XML documents (that come from your source). The source might be responsible for pulling data from different persistence engines (relational or object databases) and even the web (dynamically generated websites that supply only XML data).

In your application layer, you can create many interesting Java applications. The apps can run on the server side or client side or both. They may have graphical user interfaces or they may be web based. When I use the word application or app in this chapter, I don't exclude Java applets; I mean application (or app) in the broad sense of the word, i.e., I mean it to describe a software system written in Java that solves a real-world problem.

3 Main categories

There are many different types of software that you can write in Java to make use of XML. I have created 3 major categories to describe certain types of apps (that are currently popular) that are really well suited to the use of XML. This is by no means a comprehensive set of categories; you can create your own, and many more major categories will emerge as XML becomes more popular.

fairly straightforward. 05 is equal to 5,0C is equal to 12, 0F is thesame as 15, and 10 is equal to 16. No, really.1F is equal to 31, 20 to 32,and so on. It goes like this:

Computers have been using hex notation for quite some time now, andtypically programmers either are trained in its use or pick it upthrough experience. Either way, most programmers are comfortable withhex notation -- some of them even think in it -- and so background may be extended above and below the edges of the line-box in which the inline element appears, but user agents are not required to support this behavior. There is also no defined behavior to say whether the foreground content of a previous line appears above the background of a succeeding line, or is overwritten by that background. Negative values are not permitted.

Example

padding-bottomIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the bottom padding of an element, and this padding will

P {font-size: 12px; line-height: 1.5;}
SMALL {font-size: 66%;}
BIG {font-size: 200%;}
<P>This paragraph has a line-height of 1.5 times its font-size. In addition,
any elements within it <SMALL>such as this small element</SMALL> also have
line-heights 1.5 time their font-size... and that includes <BIG>this big
element right here</BIG>. By using a scaling factor, line-heights scale
to match the font-size of any element.</P>
Figure 8-64

Figure 8-64. Using a scaling factor for line-height