Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 25th of October 2014 05:13:54 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.

Figure 8-15

Figure 8-15. Centering an element with automatic margins


As of this writing, only Internet Explorer 4.5 and 5 for the Macintosh and Opera 3.6 will center elements using auto margins.

The other possibility is when one of the margins and the width are set to be auto. In this case, then the margin set

This can be exploited in a number of interesting ways. First off, 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.

You can use the DOM parser to generate the XML for you if you created an object model that is an adapter on top of DOM. Since your object model uses the document object tree, all the information contained in it is actually stored in the tree. The XML parser can take this tree and convert it to XML for you, you can then save this generated XML to a file. So the DOM parser can generate the ApplicationML file for you.

There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.

Client and Server side - Application Servers

property color.


This property accepts as a value any valid color, as discussed in Chapter 3, "Units and Values", such as #FFCC00 or rgb(100%,80%,0%). It has the effect of setting the color of the text in the element, as shown in Figure 6-1:

<P STYLE="color: gray;">This paragraph has a gray foreground.</P>
P {color: white;}   in comment markers, the last threePRE {color: gray;}   styles are part of the comment. */

In this example, only the first rule (H1{color: gray;}) will be appliedto the document. The rest of the rules, as part of the comment, areignored by the browser's rendering engine.

Moving on with our example, we see some more CSS information actuallyfound inside an HTML tag!

H2 {font-family: 'Zurich Black', sans-serif;}H3 {font-family: 'Zurich Bold', sans-serif;}H4, P {font-family: Zurich, sans-serif;}SMALL {font-family: 'Zurich Light', sans-serif;}

Besides the obvious tedium of writing such a style sheet, it onlyworks if everyone has these fonts installed, and it's prettysafe bet that most people don't. It would make far more senseto specify a single font family for the whole document and thenassign weights to various elements. You can do this, in theory, usingthe various values for the property font-weight. A define them in each and every document. If you ever decide to change those values ...well, you have a lot of files to edit, don't you? On the other hand, if you set up these colors as an external style sheet, and then link all of your pages to the style sheet, then you only have to edit one file in order to change the text colors of every last one of your pages. Affecting borders