Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 25th of August 2016 04:36:36 AM

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;}
same as block-level elements when it comes to formatting: verticalmargins are collapsed while horizontal margins are not, and theborders and padding default to zero unless explicitly declaredotherwise. Remember, however, that not all replaced elements areimages. Most form elements are replaced, for example.

In general, all replaced elements (block-level or otherwise) can bescaled using height and width.In most other ways, inline replaced elements are handled verydifferently, as we'll see later in this chapter. 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.

to declare your own styles to overcome the UA's styles.Inheritance won't be enough in such a case.

7.7.2. List Item Images

Sometimes, of course, a pregeneratedbullet just won't do. Instead, you feel the need to use animage for each bullet. In the past, the only way to achieve this sortof effect was to fake it. Now all you need is acombination of inconsistent operating system settings and thevagaries of human perception, which is an obstacle no computer isgoing to overcome any time soon.

It is left to individual authors to decide what chances they wish totake with using named colors, but at least with the specified sixteencolors, there is some moderate hope of consistency.

Okay, so that was the easiest way to specify color -- scary asthat may seem, it's true. The other four ways are a bit morecontaining block. Instead, if a float would stick out of its containing block by appearing next to another one, it is floated down to a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line in order to more clearly illustrate the principle at work here). This rule first appeared in CSS2, to correct its omission in CSS1.

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high as possible.

H3 {color: rgb(25%,66%,40%);}

The general syntax of this type of color value is:

rgb(color)

where color is one of two ways to specifythe color. The first way is to use percentages, and the second, whichuses numbers, is discussed later in this section.

Perhaps you want your H1 elements to be colored ashade of red somewhere between the values for red and maroon.red is simply rgb(100%,0%,0%),