Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 07th of February 2012 04:12:30 AM

Copyright © 2000 O'Reilly & Associates, Inc. All rights reserved.

Printed in the United States of America.

Published by O'Reilly & Associates, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly & Associates, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O'Reilly & Associates, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. The association between the image of a koala and the topic of HTML and XHTML is a trademark of O'Reilly & Associates, Inc.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained a certain value. Figure 8-27 shows a fewpossibilities.

Figure 8-27

Figure 8-27. Scaling images with the width property

It's also possible to scale an image (or other replacedelement) using height:

<IMG SRC="test.gif" STYLE="display: block;" ALT="test image"><IMG SRC="test.gif" STYLE="display: block; height: 50px;" ALT="test image"><IMG SRC="test.gif" STYLE="display: block; height: 200px;" ALT="test image">
herein.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

{background: green;} andwe're set. Or are we?

Not quite, no. In the old page, the navigation bar was separated slightly fromthe main display, but ran right up against the sidebar, therebycreating a sort of inverted green "L" shape. We want tomake sure that this is still the case in the new setup. This is mosteasily accomplished by making sure that the division has no paddingor border set, and that it is guaranteed to be as wide as the tablecell in which it's found. Plus, we want the bar to have aelement is not necessarily its parent element. In fact, it often isnot, unless the author takes steps to correct this situation.Fortunately, that's easy to do. Just pick the element that youwant to use as the containing block for the absolutely positionedelement, and give it a position ofrelative with no offsets. Thus:

P.contain {position: relative;}

Consider the example in Figure 9-19. It shows twoparagraphs that contain identical text. However, the first paragraph

Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to becenter. Table 6-1 showsequivalent keyword statements.

Table 6-1. Position Keyword Equivalents

So if you want an image to appear in the very top center of eachparagraph, as in Figure 6-38, you need only declare:

it's outside the parent DIV !

Figure 8-22

Figure 8-22. The effects of a negative top margin

With a negative bottom margin, though, it looks as though everything following the paragraph has been pulled upward. Compare the following markup to the situation shown in Figure 8-23:

Figure 8-23

Figure 8-23. The effects of a negative bottom margin

What's really happening in Figure 8-23 is that the elements following the DIV are placed

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Correctly implemented user agents will collapse the vertically adjacent margins, as shown in the first list in Figure 7-16, where there are 15-pixel spaces between each list item. The second list shows what would happen if the user agent didn't collapse margins, resulting in 25-pixel spaces between list items.

Another word to use, if you don't like "collapse," is