Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of September 2014 03:46:46 PM
to block-level elements such as paragraphs. It isn't possible to center an anchor within its line without aligning the rest of the line (nor would you really want to).

However, if you want to center an image all by itself, text-align is not the correct way to go about it. Given the following markup, you'll get the result in Figure 4-13:

IMG {text-align: center;}

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 herein.



Library Navigation Links

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

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 hasn't been violated, because the values of the sevenproperties add up to the required total. It's a semantic dodge,but it's valid behavior.

Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:

DIV {width: 400px; border: 1px solid black;}P.wide {margin-left: -50px; width: auto; margin-right: 10px;border: 3px solid gray;}
Figure 8-20

Figure 8-20. Setting a negative left margin

<LI>Item the first <LI CLASS="off">Item the second <LI>Item the third <LI CLASS="off">Item the fourth <LI>Item the fifth </OL>
Figure 7-80

Figure 7-80. Switching off list-item markers

list-style-type is inherited, so if you want to have different styles of bullet in nested lists, you'll need to define them individually. You may also have to explicitly declare