Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 12th of February 2016 11:15:41 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, it's possible to create frame-style interfaces using fixed

The only drawback to this ability is a small one, but you're bound to run into it eventually. Suppose you want to set the top and left margins for H1 elements to be 10 pixels, and the bottom and right margins to be 20 pixels. In that case, you have to write the following:

H1 {margin: 10px 20px 20px 10px;} /* can't be any shorter */

Unfortunately, there is no way to cut down on the number of values needed in such a circumstance. 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.

This will match any paragraph that is the first child of aDIV that immediately follows anH1 element. See Chapter 10, "CSS2: A Look Ahead",CSS2: A Look Ahead, for more details.

Figure 11-13

Figure 11-13. First-letter styling

Having set the article's body to the appearance we want, allthat remains is to adjust the placement of the divisions so that thecolumns are of roughly equal length. We can do this now because

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.

Client side - Graphical Java Applications


H1 {color: rgb(0,0,0);}                /* black */H2 {color: rgb(127,127,127);}          /* gray */H3 {color: rgb(255,255,255);}          /* white */ {color: rgb(300,2500,101);}      /* white */P.two {color: rgb(-10,-450,-2);}       /* black */

If you prefer percentages, you can use them, and it's actuallyeasy to convert between percentages and straight numbers. If you knowthe percentages for each of the RGB levels you want, then you need background-repeat: repeat-x; background-position: center;}

Figure 6-50

Figure 6-50. Centering with a horizontal repeat

Therefore, setting a large image in the center of the BODY and then letting it repeat will cause it to tile in all four directions: up, down, left, and right. The only difference background-position makes is in where the tiling starts. Figure 6-51 shows the difference between tiling from the center of the BODY, and from its top left corner.The highest the top of that image may be placed is the top of the line box from which the image originates. As you can see in Figure 8-35, this keeps images from floating too far upward.

Figure 8-35

Figure 8-35. Keeping floats level with their context

7. A left (or right) floating element that has another floating element to its left (or right) may not have its right outer edge to the right (or left) of its containing block's right (or left) edge.