These
padding values are done in shorthand, as per the method outlined in the ???Working with
CSS shorthand for boxes??? section earlier in this chapter.
#wrapper {
padding: 18px 36px 0;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
52
Finally, the contentFooter div needs styling. Its height is defined on the basis of the
height of the background image (which is a slice of the Photoshop document shown in the
following image). The background is applied to the div in the same way as in previous
examples.
One major change, however, is the use of negative margins. The contentFooter div is
nested within the wrapper, which has 36 pixels of horizontal padding. This means that the
contentFooter div background doesn??™t reach the edges of the wrapper div by default,
leaving whitespace on its left and right sides. By using margins equal to the negative value
of this padding, the div can be ???stretched??? into place.
.contentFooter {
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;
margin: 0 -36px;
}
As you can see, the horizontal value for margin is -36px, the negative of the horizontal
padding value assigned to #wrapper. The addition of all these new rules results in the following
image (which also shows the Photoshop image and exported GIF that makes up the
background).
An alternate method for getting this effect would be to place the contentFooter div outside
of the wrapper and then use the same method of aligning it:
.
Pages:
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118