The Essential Guide to CSS and HTML Web Design

Prev | Current Page 105 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"

WEB PAGE ESSENTIALS
51
2
Some additional markup is needed, due to this method requiring two background images:
one for the wrapper div (because, as per the white background in the ???Adding a background
pattern??? section, you want the content area??™s background to stop when the content
runs out) and one for a shadow for the bottom edge of the wrapper div (otherwise
the shadows at the side will just stop dead, resulting in something like what??™s shown in the
following image).
In terms of markup, add an empty div, as shown in the following code block:
? accumsa'n eu, blandit sed, blandit a, eros.

In CSS, for the drop shadows flanking the content area to stop where the content does,
they need to be assigned to the wrapper div, not the web page??™s body. Therefore, you
need to amend the body rule, removing the link to a background, but retaining the color
setting:
body {
background: #878787;
}
The #wrapper rule needs updating in two ways. First, the new background image needs to
be applied to the div??”hence the new background property/value pair. However, because
the drop shadows are now shown within the wrapper div, it needs to take up more horizontal
space. Since the dimensions of the div??™s content don??™t need changing, this is
achieved by increasing the horizontal padding value. Also, because padding at the foot of
the div is no longer required (the contentFooter div effectively takes care of padding at
the bottom of the content area), the bottom padding value needs to be set to 0.

Pages:
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

Your Electronic Books

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"