Tuesday 24th of November 2015 11:05:23 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: O

oblique text: 5.4.1. Fonts with Style
octothorpe (#) preceding ID selectors: 2.3.2. ID Selectors
offsets (see side-offset properties)
CSS implementation in: 1.3.2. Implementations
padding and: 7.5.4. Padding: Known Issues
padding values, negative: 7.5. Padding
operating system, colors and: 10.5.2. Colors
order sorting: 2.8. The Cascade
ordered lists: 7.7.1. Types of Lists
7.7.2. List Item Images
origin image: Length values
origin sorting: 2.8. The Cascade
origins: 2.8. The Cascade
orphans property: 10.8.1. Paged Media
outline properties: 10.5.3. Outlines
overflow: 9.1.4. Content Overflow and Clipping
overflow-clip property: Overflow clipping
overflow clipping: Overflow clipping
overflow property: Overflow
elements, altering: 9.5. Stacking Positioned Elements
floated elements, preventing: 8.3.1. Floating: The Details
margins (see collapsing margins)
text, preventing: 8.4.3. Managing the Line Height of Inline Elements
overlining: 4.1.6. Text Decoration
overriding previously declared values: 11.1.3. Case 3: Putting a Magazine Article Online

Symbols | A | B | C | D hyperlinks, as depicted in Figure 6-24. Of course, if you want to be able to see thetiling pattern, the image will probably need to be pretty small.After all, individual letters aren't that large!

A.grid {background-image: url(smallgrid.gif);}<P>This paragraph contains <A HREF="..." CLASS="grid">an anchor with abackground image</A> which is tiled only within the anchor.</P>
Figure 6-24

Figure 6-24. A background image on an inline element

There are a number of ways to employ this technique. You might placean image in the background of STRONG elements, in | 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.

Thus, if an image is 150 pixels wide, and its width property is set to the value auto, then its width will evaluate to 150px , as shown in Figure 8-26:

IMG {display: block; width: auto;}
Figure 8-26

Figure 8-26. Replaced elements with auto width are rendered using their intrinsic size

Replaced elements can have their height and width set to a value other than auto or their intrinsic dimensions. This is mostwill evaluate to whatever length is required to make the element box's width equal the parent element's width. Thus, if the sum of the seven properties must equal 400 pixels, and no padding or borders are set, and the right margin and width are set to 100px while the left margin is set to auto, then the left margin will be 200 pixels wide:

P {margin-left: auto; margin-right: 100px; width: 100px;} 

The results are shown in Figure 8-11.

Initial value




DIV {position: relative;}
P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;
margin-left: auto;}
P.B {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;
margin-top: auto;}

This is an important point to always keep in mind: only positioned elements establish containing blocks for their descendant elements. I know this has come up before, but it's so fundamental that it needs to be repeated.