Thursday 26th of November 2015 01:12:20 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book


elements. For example, we could absolutely position an element andthen absolutely position one of its children, as shown in Figure 9-23.

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;}

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

BODY {background-image: url(yinyang.gif);background-repeat: no-repeat;}

This may not seem terribly useful, given that there is only a smallsymbol in the top left corner of the document, but let's try itagain with a much bigger symbol, as shown in Figure 6-33:

Figure 6-33

Figure 6-33. Placing a single, large backround image

BODY {background-image: url(bigyinyang.gif);background-repeat: no-repeat;}
Figure 7-30

Figure 7-30. Two valid ways of rendering inset

So let's assume that you want to define a border style forimages that are inside a hyperlink. You might make them outset, sothey have a "raised button" look, as depicted inFigure 7-31:

A:link IMG {border-style: outset;}
Figure 7-31

Figure 7-31. Applying an outset border to a hyperlinked image

Again, the color of the border is based on the element's valuefor color, which in this circumstance is likely to

BODY {background-image: url(bg23.gif);
background-repeat: no-repeat;
background-position: 20px 30px;}
Figure 6-43

Figure 6-43. Offsetting the background image using length measures

This is, of course, different than percentage values, in the sense that the offset is simply from one top left corner to another. In other words, the top left corner of the background image lines up with the point specified in the background-position declaration. You can combine length and percentage values, though, to get a sort of "best of