HTML and CSS Reference
In-Depth Information
The Markup
Now that we have a design, we need to figure out how to structure the information within our
(X)HTML document. The obvious elements we need to account for are the four boxes, the
logotype, and the list of links in the middle. We've decided to make this a fixed-width layout,
with the content elements centered in the browser.
After a little thought, we can see the four boxes are in two columns of two boxes each,
with the link list as a third, center column. We can float the two outer columns to the left and
right, and center the link list in between, as long as the center column comes last in the source
(which is perfectly fine in this case, since we'd like the other content to display first for users
viewing the site without styles or on an alternate browsing device). That only leaves the logo-
type: we'd prefer to have an
h1
with the site title before all our other content in the source, and
replace that with the logo graphic. That means the
h1
cannot be located in the center column
(since it's going to be last in the source). We can move it to the top by adding a header
div
to
enclose the site title, and then align it with the center column.
We now have the following markup for the layout elements (we've omitted some of the
extra markup used for the contents of the four outer boxes, since it doesn't affect the layout—
the full source file is included in the downloads for this chapter, and no hacks are used to style
the extra elements):
<div id="superfluous">
<div id="wrapper">
<div id="header">
<h1>Dan Rubin</h1>
</div>
<div id="col1">
<p id="top1">...</p>
<p id="bottom1">...</p>
</div>
<div id="col2">
<p id="top2">...</p>
<p id="bottom2">...</p>
</div>
<div id="content">
<div id="navigation">
<ul>
<li><a href="http://superfluousbanter.org/">Read my blog »</a></li>
<li><a href="http://webgraph.com/">See my work »</a></li>
<li><a href="http://roundersquartet.com/">Hear me sing »</a></li>
<li><a href="http://flickr.com/photos/danrubin/">Browse my pics
➥
»</a></li>
<li><a href="http://myspace.com/danielstephenrubin">My MySpace
➥
»</a></li>
<li><a href="mailto:dan@danielrubin.org">Send me email »</a></li>
</ul>
