Creating Common Page Elements - Pro CSS Techniques - page 187

Next, we apply the left image to the h2 heading, anchoring it to the top left. Because the
left image is only a few pixels wide, it does not obscure the border previously applied—the join
is essentially seamless, as shown in Figure 8-24.

#related h2 {
margin: 0;
padding: 10px;
font-size: large;
background: url(example2/left.gif) no-repeat left top;

}

Figure 8-24. Corner applied to the heading

The next element to be treated is the unordered list ( ul ). We've already taken care of the
top-left corner (applying an image to the h2 ) and the top and right edges (applied to the
#related div ), and now we're going to add in another piece to this jigsaw on the left side. This
image will be anchored to the bottom left of the ul element.

■

Note It's necessary to remove margins from the unordered list so that there is no gap between the head-
ing and the list (otherwise, the border effect would be broken).

The following CSS does the trick (Figure 8-25 is the proof ):

#related ul {
margin:0;
padding-bottom:10px;
background: url(example2/left.gif) no-repeat left bottom;

}