Wednesday 13th of December 2017 08:01:58 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: H

half-leading: Generating a line box
hanging floats: Negative margins and floating
hanging indents: Indenting text
hash mark (see octothorpe)
header of a table: 10.7. Tables
Hebrew, default text alignment: Aligning text
block-level elements: Height
limiting via min-max properties: Limiting width and height
lines (see line height)
positioning and: 9.1.3. Width and Height
height property: 7.1. Basic Element Boxes Setting width and height
hexadecimal colors: Hexadecimal colors
list of: Hexadecimal colors
hiding styles with @import: 11.2.2. Hiding Styles with @import
hierarchy of elements: 2.5. Structure
horizontal alignment: Aligning text
horizontal formatting: 8.2.2. Horizontal Formatting
horizontal margins, noncollapsing: 8.2.2. Horizontal Formatting
horizontal properties, block-level elements: Horizontal properties
:hover pseudo-class: :hover
HREF attribute: LINK attributes
HSPACE attribute: 8.1. Basic Boxes
HTML: 1.1. The Web's Fall from Grace
4.0 specification, phasing out tags: 1.2.6. Preparing for the Future
combined with CSS: 1.4. Bringing CSS and HTML Together
11.1.2. Case 2: Library Catalog System Interface
selectors in: 2.1.2. Simple Selectors
structure: 2.5. Structure
STYLE element: 1.4.2. The STYLE Element
styling compared to CSS: 1.2.1. Rich Styling
tips for using: 11.2. Tips & Tricks
whitespace in: Handling whitespace
HTML attributes
ALINK: 2.4.1. Pseudo-Class Selectors
of BODY element: 2.4.1. Pseudo-Class Selectors BODY attributes
CLASS: 2.3.1. Class Selectors
HREF: LINK attributes
HSPACE: 8.1. Basic Boxes
LINK: 2.4.1. Pseudo-Class Selectors
of LINK element: LINK attributes
quotation marks with: 5.1.3. Using Quotation Marks
single attribute values, matching: Matching single attribute values
STYLE: 1.4.6. Inline Styles
2.7.1. Inheritance and Specificity
2.8. The Cascade
5.1.3. Using Quotation Marks
TYPE: LINK attributes
VLINK: 2.4.1. Pseudo-Class Selectors
HTML comments: 1.4.4. Actual Styles
HTML documents, style sheets linked to: 1.4.1. The LINK Tag
background images, placing in: 6.2.1. Background Images
color, setting: 6.1.1. Foreground Colors
removing underlining from: 4.1.6. Text Decoration
hyphenated values, matching: Matching hyphenated values
hyphenation: Aligning text

Symbols | A | B | C

As Figure 7-63 makes clear, the image "floats" tothe right side of the browser window. This is just what we expect.However, some interesting issues are raised in the course of floatingelements in CSS.

Figure 7-63

Figure 7-63. A floating image

7.6.1. Floated Elements

There are a few things to keep in mind with regard to floating | 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.

This isn't to say that you shouldn't use negative values, of course, just that there are issues to consider. As always.


Although most CSS-aware browsers (Explorer 4.x and 5.x and Opera 3.5 and later) honor negative background positions, the effects are wildly unpredictable at best. This applies even to negative lengths, which can cause unwanted tiling, inappropriate positioning of the background images, and more. If you really need toassociated with floating elements. Take the example of a short document, composed of no more than a few paragraphs and H3 elements, where the first paragraph contains a floated image. Further, this floated image has a right margin of five pixels (5px). You would expect the document to be rendered very much as shown in Figure 7-67.

Figure 7-67

Figure 7-67. Floating an image

Nothing unusual there, of course, but look what happens when we set the first paragraph to have a background, as has been done in Figure 7-68. calculated value, which is usually, but not quite always, zero. (Fortunately, the circumstances under which auto becomes something other than zero are very well-defined, and are discussed in detail in the next chapter.)

Finally, it's possible to set a percentage value for margin. The details of this type of value will be discussed in a later section.

<P>This paragraph is contained within a DIV which has a width of 200 pixels, so its margin will be 10% of the width of the paragraph's parent (the DIV). Given the declared width of 200 pixels, the margin will be 20 pixels on all sides.</P> </DIV> <DIV STYLE="width: 100px;"> <P>This paragraph is contained within a DIV with a width of 100 pixels, so its margin will still be 10% of the width of the paragraph's parent. There will, therefore, be half as much margin on this paragraph as that on the first paragraph.</P></DIV>