you're trying to do things like add borders to an inlineelement. Let's say you want to put 5-pixel borders around anyhyperlink:

A:link {border: 5px solid blue;}

If you don't set a large enough line-heightto accommodate the border, it will be in danger of overwriting otherlines, as shown in Figure 8-62.

Figure 8-62

Figure 8-62. Inline borders can be overlapped

Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 22nd of July 2014 11:49:39 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 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.

8.4.2.2. Adding box properties

As we're aware from previous discussions, padding, margins, and borders may all be applied to inline nonreplaced elements, and they don't influence the line-height at all. If we were to apply some borders to a SPAN element without any margins or padding, we'd get results such as that shown in Figure 8-57.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a childof A, which is in turn a child of a relatively positionedDIV. B was absolutely positioned, as was elementA, using styles like these:

DIV {position: relative;}P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;margin-left: auto;}background-position: center;}
Figure 6-49

Figure 6-49. Centering the origin image and repeating vertically

So there you have it: a stripe running through the center of thedocument. It may look wrong, but it isn't.

The example shown in Figure 6-49 is correct becausethe origin image has been placed in the center of theBODY element and then tiled along the y-axisin both directions-- in other words, both up

That's all it takes.

There may be times where you want a different amount of space on each side of an element. That's simple as well. If we want all H1 elements to have a top margin of 10 pixels, a right margin of 20 pixels, a bottom margin of 15 pixels, and a left margin of 5 pixels, here's all we need:

H1 {margin: 10px 20px 15px 5px; background-color: silver;}

As Figure 7-8 reveals, we have what we wanted. The order of the values is obviously important, and follows this pattern: