HTML and CSS Reference
In-Depth Information
</div>
<p id="footer">© 2006 <a href="http://superfluousbanter.org/">Daniel S.
➥
Rubin</a>. Logo by <a href="http://antonpeck.com/">Anton Peck</a></p>
</div>
</div>
</div>
As you can see, we've filled out the link list, and also added a footer paragraph within the
center (third) column. The footer paragraph will follow the list in the flow, and its default posi-
tion should be exactly what we want.
You might also have noticed two outer
div
s surrounding the other elements. These will
allow the layout to be centered in the browser window (
#wrapper
), as well as add the gradient
and background artwork anchored to the top of the browser in our design (
#superfluous
—the
gradient and artwork at the bottom of the design will be assigned to the
body
). Without styles,
this displays in a fairly orderly manner (Figure 6-8, with actual content included).
Figure 6-8.
Things look pretty good in Firefox (and other browsers) without any styles.
The Style Sheet
At this stage, we have a good idea of how we're going to position and style the various ele-
ments of the layout, including applying a few background images to incorporate the purely
visual parts of the design (shown here minus styles used for visual effects on the four boxes; as
with the markup, this extra code is included in the downloadable source, and is hack-free):
body {
background:#930 url(bg_body.gif) no-repeat center bottom;
margin:0;padding:0;
text-align:center;
min-width:832px;
font-family:'hoefler text', georgia, serif;
}
