Book Home Friday 20th of April 2018 04:34:01 PM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

If you are having difficulty searching, or if you have not used this search utility before, please read this.

Library Navigation Links

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

Consider the following example, demonstrated in Figure 4-5, which adds a floatedimageto the mix:

P.hang {text-indent: -30px;}<P CLASS="hang"><IMG SRC="floater.gif" WIDTH="30px" HEIGHT="60px"ALIGN="left" ALT="Floated">This paragraph has a negatively indented firstline, which overlaps the floated image which precedes the text.  Subsequentlines do not overlap the image, since they are not indented in any way.</P>

Many interesting designs can be achieved using this simple technique.

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

Figure 7-69

Figure 7-69. More floating images and element backgrounds

Yes, the figure is correct: the content of the H3on the color of the border, although the exact method may vary between user agents. For example, Figure 7-30 illustrates two different ways of rendering an inset border.

Figure 7-30

Figure 7-30. Two valid ways of rendering inset

So let's assume that you want to define a border style for images that are inside a hyperlink. You might make them outset, so they have a "raised button" look, as depicted in Figure 7-31:

Figure 11-19

Figure 11-19. Closing up the usual gap

In Explorer, this can be done withthese rules:

H1 {margin-bottom: 0;}P {margin-top: 0;}

For Navigator, though, you have to set the top margin of theparagraph to be -1em to get the same effect, whichwill hopelessly mangle Explorer's display of the document. How

However, that structure is an inherent part of the relationshipbetween HTML and CSS; without the structure, there couldn't bea relationship at all. In order to understand it better, let'slook at an example HTML document and break it down by pieces.Here's the markup, shown in Figure 1-1:

Figure 1-1

Figure 1-1. A simple document

Now, let's examine each portion of the document.

the chapter, we'll see how this can be useful.

The other value, auto, allows for some even more interesting effects. It acts much the same as setting auto on margins, but in positioning, this can permit the creation of elements that are only as wide or tall as they need to be in order to display their content, without having to exactly specify how high or wide that will be. We'll explore this in detail later in the chapter as well.