Wednesday 24th of August 2016 09:37:07 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

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

Index: Y

There are no index entries for this letter.

font-weight: bold;} P {margin-left: 5em; position: relative;} <P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN> laoreet dolore magna aliquam erat volutpat.</P>

While this does rely on inserting an extra element, the advantage is that the SPAN can be placed anywhere in the paragraph and still have the result depicted in Figure 9-21.

Figure 9-21

Figure 9-21. Setting a "change bar" with absolute positioning

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.

"on top?" You'll note that few of the examples in this section use background colors for all elements. That's because if they did, content might get overwritten by the background color of a following element. The CSS specification does not say what should happen when elements overlap in this manner; instead, it's left up to implementors to decide.

It has been argued that all foreground content is always shown "in front of " all background content, and the behavior of floated elements seems to support this interpretation. On the

6.2.2. Repeats with Direction

Thus far, all we've ever been able to doin document design is repeat background images in both the horizontaland vertical directions. If we wanted some kind of"sidebar" background, it was necessary to create a veryis the distance between the elements. Figure 8-21provides two concrete examples.

Figure 8-21

Figure 8-21. Examples of negative vertical margins

You'll notice the "pulling" effect of negative topand bottom margins. This is really no different from the way in whichnegative horizontal margins cause an element to push outside of itsparent. Consider:

As we can see from Figure 8-22, the paragraph has only want part of it visible in the top left corner of the containingelement? No problem, at least in theory. First, assume the image is300 pixels tall by 300 pixels wide. Then, assume that only the bottomright third of it should be visible. We can get the desired effect(shown in Figure 6-45) like this:

BODY {background-image: url(bigyinyang.gif);background-repeat: no-repeat;background-position: -200px -200px;}
Figure 6-45

Figure 6-45. Using negative length values