Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 28th of November 2015 03:13:18 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:

To maintain strict control of line breaks, enclose your content in a <NOBR></NOBR> tag and then insert <BR> tags to specify exactly where you do want the line breaks to occur.  You can also include <WBR> tags to indicate where optional line breaks may occur if the line extends beyond the right edge of the browser window. 

The preferred way to control text alignment is by including an ALIGN attribute in a block-level tag such as a paragraph <P ALIGN="left">, headline, e.g., <H2 ALIGN="center"> or page division

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.

LI {list-style-position: outside;}
Figure 7-85

Figure 7-85. Placing the bullets outside list items

Should you desire a slightly different appearance, though, you canpull the bullet in toward the content by setting the value to beinside:

LI.first {list-style-position: inside;}

This causes the bullet to be placed "inside" the listitem's content. The exact way this happens is undefined, but XML allows you to easily generate XML documents (that contain your information), since it is so structured.

  • XML parsers allow you to code faster by giving you a parser for your all your XML documents (with and without DTDs).
  • XML documents are easily committed to a persistence layer

    XML documents may be stored in files or databases. When stored in files, XML documents are simply plain text files with tags (and possibly DTDs). It is very easy to save your XML documents to a text file and pass the text file around to other machines, platforms and programs (as long as they can understand the data). In the worst case scenario, XML documents (files) can be viewed in a text editor on just about any platform.

    User agents are not, according tothe CSS1 specification,required to fully support negative margins, using the phrase,"A negative value is allowed, but there may beimplementation-specific limits." In the world of web browsers,though Navigator 4.x, Explorer 4.x/5.x, and Opera 3.x do permitnegative margins:

    Negative margins have an impact on vertical formatting, affecting how remain are the details of what happens when absolute positioning isinvoked.

    When an element is positioned absolutely, it is completely removedfrom the document flow. It is then positioned with respect to itscontaining block, and its edges are placed using the side-offsetproperties. The positioned element does not flow around the contentof other elements, nor does their content flow around the positionedelement. This implies that an absolutely positioned element mayoverlap other elements, or be overlapped by them. (We'll seeelement is contained within it, even though this results in a great deal of extra blank space within the parent element.

    Then there is the question of what happens to elements that flow past a floated element but have visible backgrounds. Let's take the preceding example and change it so that the second H3 element has a visible background and border, as has been done in Figure 7-69.