HTML Utopia: Designing Without Tables Using CSS. Chapter 5: Building the Skeleton

HTML Utopia: Chapter 5: Building the Skeleton

In this book, I take the opposite approach. I first look at the site-level and page-level issues involved with CSS design, so that we can understand the big picture perspective of page layout without tables (which is, after all, the primary thrust of this book). And later, in Part III, I’ll discuss styling the content of the pages we’ll be laying out in this and the next chapter.

This chapter focuses specifically on creating the basic structural layout of a Web page or site using CSS. In it, I’ll discuss multi-column layouts—both in general and very specifically—as they relate to the Footbag Freaks site. I’ll teach you about boxes, borders, and the famous Box Model of CSS design. I’ll delve into the intricacies of creating and using two- and three-column page layouts, and into the mysteries of floating objects. I’ll guide you through the process of creating dummy layouts for the pages you’ll encounter in the Footbag Freaks project, and in other projects you may create.

I’ll conclude with the usual tips on dealing with the layout issues presented in this chapter—the issues involved in converting pages to CSS from an existing table-centric design.

Enumerating Design Types

One of the first decisions you have to make when you create any Website, but particularly one where you intend to put CSS to its most effective use, is how many different types of pages and elements you’re going to need.

How Many Page Types?

Most sites use more than one basic page layout. The front, or index page, often has a different look and feel from the “inside” pages. In the Footbag Freaks site, for example, the specification tells us that bread-crumb navigation will appear on all but the front page. An inspection reveals that the large graphic that displays near the top of the front page does not appear on other pages of the site.

On a typically complex ecommerce site, you might run into far more page types. For example, such a site might include different layouts for its:

Some of these pages might display dynamic content that is stored in a database and generated in response to specific user requests. Others might be flat HTML pages that never change unless you redesign them.

The Footbag Freaks site appears to need only one type of page layout. The secondary page has fewer elements than the home page, but the relative positioning and layout of the common elements doesn’t change from one page type to the other.

How Many Design Elements?

Figure 5.1. The Footbag Freaks Home Page