Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 19th of June 2013 03:46:51 AM
PreviousCascading Style Sheets: The Definitive GuideNext

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 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.

PreviousHomeNext
9.3. Absolute PositioningBook Index9.5. Stacking Positioned Elements
Library Navigation Links

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

TITLE attribute. This attribute is not often used, but it could become important in the future. Why? It becomes important when there is more than one LINK tag -- and there can be more than one. In these cases, however, only those LINK tags with a REL of stylesheet will be used in the initial display of the document. Thus, if you wanted to link in two style sheets with the names basic.css and splash.css, the markup would look like this:

parent.

Figure 8-9

Figure 8-9. The "seven properties" of horizontal formatting

Only three of these seven properties can be set toauto: the width of theelement's content, and the left and right margins. The left andright padding and borders must be set to specific values, or elsethey default to a width of zero (again, assuming noborder-style is declared; if one has been set,then the width of the borders is set to be the vaguely defined value cascade to your advantage: 

H1 {border: thick silver solid;
border-left-width: 20px;}

The second rule overrides the width value for the left border assigned by the first rule, thus replacing thick with 20px , as we see in Figure 7-50.

Figure 7-50

Figure 7-50. Using the cascade to one's advantage

list-style-image

Yes, that's really all there is to it. One simple url value, and you're putting images in for bullets, as you can see in Figure 7-81.

Figure 7-81

Figure 7-81. Using images as bullets

Of course, you should exercise care in the images you use, as this example makes painfully clear (shown in Figure 7-82):

required to support this type of effect.

7.5.4. Padding: Known Issues

In the first place, padding and Navigator 4.x just plain don't get along. The main problem is that you can set padding on an element with a background color, but the background won't extend into the padding unless you get very sneaky. You need to add a border, as was discussed earlier in "Margins: Known Issues." set to be 1em. The content width (in other words,the value of width) of the paragraph, plus itsleft and right padding, borders, and margins, always add up to thewidth of the DIV 'scontent, as illustrated in Figure 8-7.

Figure 8-7

Figure 8-7. Element boxes are as wide as the width of their parent element

Thus, if the width of the DIVis 30em , then the sum total of the content width,padding, borders, and margins of each paragraph will be