351 CSS Positioning and Layout
Discussion
This simple technique can be used to great effect in your layouts. In this example,
I chose to apply the image to the wrapper block, as I want the background to extend
right down to the end of the content, but you could use this technique to have the
background stop above the footer, or after a certain section of content: simply apply
the background to an element that contains the section of content you want.
Creating Solid Backgrounds
I used a very tall image here, because I was adding a gradient. If you want to display
a solid color behind your navigation, use an image thats the same width as the
navigation, but only a few pixels tall, and repeat it vertically.
How do I add a drop shadow to my layout?
Drop shadows are commonly used on layoutsparticularly on content boxes
within a layout. Lets add a drop shadow to a fixed width layout such as the one
we worked with in the section called How do I create a full-height column?.
Solution
We can add a drop shadow to this layout using two images: one for the background,
and one to create the shadow effect at the bottom of the layout. Figure 9.34 shows
the effect were working to create.
The CSS Anthology352
Figure 9.34. A drop shadow
To create this effect, we need to add some markup that will provide us with hooks
to which we can add the two images.
The first image, which Ive named shadow-bg.jpg and can be seen in Figure 9.35, is
a background image that well apply to the div with an ID of wrapper. This image
is the left and right drop shadow, and it repeats down the page.
Figure 9.35. The files used to create the drop shadow effect
353CSS Positioning and Layout
Ive increased the width of my wrapper block by 20 pixels. Ive done this because
I want the content area to stay the same width, but I need to allow room for the
shadow on either side of the content:
2col-fixedwidth-shadow.css (excerpt)
#wrapper {
position: relative;
text-align: left;
width: 780px;
margin-right: auto;
margin-left: auto;
background-image: url(shadow-bg.jpg);
background-repeat: repeat-y;
}
Next, I wrap an additional div, which Ive named main, around the content,
navigation, and footer elements, just inside the wrapper block:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Recipe for Success</title>
<link href="2col-fixedwidth-shadow.css" rel="stylesheet"
type="text/css" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="header">
<h1>Recipe for Success</h1>
</div>
<div id="content">
<p>The Recipe for Success web site...</p>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>

Get The CSS Anthology, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.