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 that’s 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 layouts—particularly on content boxes
within a layout. Let’s 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 we’re 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 I’ve named shadow-bg.jpg and can be seen in Figure 9.35, is
a background image that we’ll 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
I’ve increased the width of my wrapper block by 20 pixels. I’ve 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 I’ve 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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
