HTML and CSS Reference
In-Depth Information
<p id="footer">&copy; 2006 <a href="">Daniel S.
Rubin</a>. Logo by <a href="">Anton Peck</a></p>
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;
font-family:'hoefler text', georgia, serif;
Search WWH ::

Custom Search