Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 25th of October 2016 01:40:13 AM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a

Note that the boldface element in this case is positioned in relation to its parent element's content box, which defines its containing block. Without the relative positioning of the parent element, the containing block would be another element. Consider a case where the element being positioned is a child of the BODY element, e.g., a paragraph or heading element. With the right styles, the containing block for the positioned element will be the entire BODY element. Thus, applying the following styles to the BODY and the fifth paragraph in a document would specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:


Library Navigation Links

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


<IMG SRC="b5.gif" style="float: right;" alt="section b5">

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

Figure 7-63

Figure 7-63. A floating image

brighter than ever! Join us...

As we can see in Figure 6-23, a background has beenapplied to a single paragraph and no other part of the document.

Figure 6-23

Figure 6-23. Applying a background image for a single element

This ability goes even further, allowing you to place backgroundimages on inline elements likehyperlinks, 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.

In Figure 8-46, the borders for each line of textalso happen to coincide with the top and bottom of each line box.This is only true because no padding or line height has been set forthe inline text, but for the moment, let's use the visual cuefor reference. Also, notice that the borders actually overlap eachother slightly: for example, the bottom border of the first line isjust below the top border of the second line. This is because theborder is actually drawn on the next pixel (assuming we'reusing a monitor) to the outside of each linebox. Since the line boxes are touching each other, their borders will

BODY {background-image: url(yinyang.gif);background-repeat: repeat-x;}

Now the image is repeated along the x-axis (in other words,horizontally), as illustrated in Figure 6-31.

Figure 6-31

Figure 6-31. Tiling along the horizontal axis

Finally, of course, we may wish not to repeat the background image atall. In that case, we use the last value,no-repeat, which is illustrated in Figure 6-32: