Article
About the Author
Dan Shafer and Rachel Andrew
Dan cut his teeth as the first Webmaster and Director of Technology at Salon.com, then spent almost five years as the Master Builder at CNET's Builder.com. Rachel is the Director of edgeofmyseat.com, a Web solutions company in the UK. She has worked on a number of books as a co-author, and is a member of the Web Standards Project, serving on the Dreamweaver Task force. Rachel is the author of SitePoint's The CSS Anthology and Build Your Own Standards Compliant Website Using Dreamweaver 8.
Rock-solid CSS Layouts
This chapter is excerpted from SitePoint's HTML Utopia: Designing Without Tables Using CSS, Second Edition, which provides a complete introduction to CSS and shows you how to build rock-solid CSS-based web sites from scratch. By the end of the book's 12 chapters, you'll understand the ins and outs of CSS, and you'll be able to create robust, standards-compliant site designs that degrade gracefully in older browsers and are easy to maintain.
You can download this chapter in PDF format, along with the first three chapters of the book, if you'd prefer to read it offline. Now, let's get started building your CSS-based page layout!
We now have some sound theory under our belts. The rest of this book will concentrate on how you can put CSS into practice when developing your own sites. Along the way, we'll be learning how to lay out pages using CSS—moving from simple layouts to more complex ones—and how you can combine some of the concepts you've already read about to create great-looking sites.
This chapter will start with the creation of a simple two-column layout. Along the way, we'll discover how to use absolute and relative positioning, and see how margins, padding, and borders work together. Then, we'll get an understanding of how all these tools can be used together in practice by creating a two-column layout that uses many of the techniques we have discussed already in this book.
While the layout we'll create in this chapter is a relatively simple one, it's a structure that's used by many web sites; the layout we'll develop here could easily form the basis for a production site.
The Layout
Many web site designs start life as mock-ups in a graphics program. Our first example site is no exception: we have an example layout or "design comp" created in Fireworks as a starting point.
Figure 8.1. Creating the layout as an image file
Starting out with a visual like this enables us to think about the way we're going to build the site before we start to write any XHTML or CSS. It gives us the opportunity to decide how best to approach this particular layout before we code a single line.
This layout divides the page into three main sections: a header, which contains the site logo and some main navigation; a main content area comprising a large image above a list of news stories; and a sidebar, which presents some additional items.
Figure 8.2. Marking the main sections on the layout
This layout could be described as a two-column layout with a header area. Being able to visualize a design as being a combination of its main sections eases the process of deciding how to approach the page layout.
Creating the Document
Having decided what the basic components of our page will be, we can start work. The first thing we'll do is create an XHTML document that contains all of the text elements we can see in our layout image, marked up using the correct XHTML elements.
Working this way might seem a little strange at first, particularly if you have been used to working in a visual environment, such as Dreamweaver, and simply concentrating on how the design looks. However, one of the advantages of using CSS for layout is that we're able to separate the structure of the page from its appearance. This allows us to concentrate on building a good solid document as the basis of our site, before adding the design using CSS.
We start out with the basic requirements for an XHTML Strict document. As we're going to use CSS for all of the presentational information on this site, there's no reason not to use a Strict DOCTYPE. The Transitional DOCTYPEs (for both XHTML and HTML 4.01) allow you to use attributes and elements that are now deprecated in the W3C Recommendations. The deprecated elements and attributes are mainly used for presentation, and as we're going to use CSS—not XHTML—for presentation, we won't need to use these anyway.
Example 8.1. index.html
<!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">
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Declaring the Character Set
In our pages, we've used the meta element with the http-equiv="Content-Type" attribute to declare our document's character set. This makes it easy for browsers (and the W3C validator) to determine which character set is being used in the document. If this information was missing, a browser could misinterpret the characters in your page, which could see your pages rendered as unintelligible garbage.
All of the examples in this book use ISO-8859-1 encoding, which is the default for most popular text editors and programs such as Dreamweaver. If you're dealing with a different character set, such as Unicode, you'll need to change the meta elements accordingly.
The Header
Let's start to add the content of this page to our document. As we do so, we'll split it up into the various sections identified above, containing each page section between <div> and </div> tags. We'll give each div an id to identify that section; we'll use these ids to address each section and style it using CSS.
After the <body> tag, add the following markup:
Example 8.2. index.html (excerpt)
<div id="header">
<p>The Home of the Hack</p>
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div> <!-- header -->
We won't worry about any image elements at this point, because there are numerous ways in which we can add images to the page using CSS; we'll make the decision as to the best way to add each image as we create our CSS. Thus, the header area simply contains the tag line, "The Home of the Hack," and a list that includes the main navigation links.