contentFooter {
width: 500px;
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;
WEB PAGE ESSENTIALS
53
2
padding: 0 36px;
margin: 0 auto;
}
In order to ensure the background of the wrapper joins up with the shadow on the
contentFooter div, a single pixel of bottom padding needs to be applied to the #wrapper
rule:
#wrapper {
padding: 18px 36px 1px;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}
Gradients
Tiled gradient images can be used to add depth and visual interest, without sapping
resources (the example??™s image is under 2 KB in size). The depicted example is based on
the page from the ???Drop shadows??? section. The changes are an amendment to the background
pair in the #wrapper rule, tiling the gradient image horizontally on the wrapper??™s
background, and new padding settings, so the text doesn??™t appear over the gradient.
#wrapper {
padding: 36px 18px 18px;
background: #ffffff url(background-gradient.gif) repeat-x;
width: 500px;
margin: 0 auto;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
54
Watermarks
Although it??™s common for sites to be centered in the browser window, many designers
choose left-aligned sites that cling to the left edge of the browser window. Both design
styles are perfectly valid, but in an era of rapidly increasing monitor resolutions, you can
end up with a lot of dead space to the side of a fixed-width left-aligned design.
Pages:
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119