Using tables to layout web pages has never been the intention of tables, but only in recent time has it become common to require web designers to use more browser friendly methods. Of course, only in recent time has the CSS-support been good enough to avoid the tables without way too much hassle, but how do you do the CSS-layout right?
In this article, we will first see how we can define and describe a layout by using CSS instead of tables, before we take a look on the modern way to implement dropdown menus with almost no JavaScript what so ever.
Sketch
First of all, you need to know how the layout of the page will be. Draw it down on paper. A rough sketch is more than sufficient. This sketch must be clear on what the different sections of the page is. For example, a common layout can consist of header, navigation, main content, a small column for ads or list content, and footer.
In my sketch I've chosen a static width, centered layout with the mentioned sections where I have a misc content column on the right and a horizontal navigation bar. It’s nothing fancy, but clean and clear.
Structure
Let’s see how we structure the above layout with (X)HTML.
<html>
(…)
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="right_column"></div>
<div id="border_wrapper">
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Notice how simple the html is for this layout. This is the power of using CSS to define layout, versus tables which would require either nesting or some colspan logic.
All the visual-specific stuff will now be separated from the code that specifies the sections, and this enables us to easily modify the look of a page without even touching the html (which on static sites could involve updating dozens of html-files).
You might wonder what the border wrapper is for, but we’ll get to that later.
Style
Now, for the CSS, we begin with some of the general attributes:
body {
margin: 10px;
font-family: arial, verdana;
font-size: 10pt;
color: #666;
background-color: white;
}
h1, h2, h3, h4, h5, h6 {
color: #69c;
margin: 0;
padding: .5em 15px;
}
p {
margin: 0;
padding: 0 15px 1em;
}
There’s nothing special here. I just set the standard for how large the text should be (which affects the em-unit that I use to define font size later), the default font, and a softer text color. I set the default header color to a nice blue, and force the margin for both headers and paragraphs to zero and top/bottom padding to be defined by the font size. I set all these explicitly as different browsers tend to have different defaults for these values, and I want to achieve a consistent look as is possible.
Layout
Now for the actual layout, we start with the page wrapper:
#page_wrapper {
margin: 0 auto;
width: 760px;
border: 1px solid #ccc;
}
The left and right margins are set to auto. This is the correct way of centering a block, but for this to work in all browsers you must remember to specify the doctype-tag correctly. I currently use XHTML 1.0 Transitional, as it seems to be both flexible and widely supported. The tag for XHTML 1.0 Transitional looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I set the width of the page to 760 pixels (always define the unit (e.g. px), unless the value is 0), as this will display correctly on 800x600-screens, and it makes the paragraphs suitably wide for reading.
Note: The design of this page is static width. If you prefer dynamic width just remove the width-attribute from #page_wrapper. The rest of the design will not be broken. You can also specify max-width and min-width to keep some control in the browsers that support these attributes (IE6 does not).
#header {
width: auto;
letter-spacing: .6em;
text-align: center;
padding: 2px 0;
background-color: white;
}
#header h1 {
font-size: 2.2em;
}
This defines the whole look of the header. It gets the blue color from the other headers, and I added some extra letter spacing for a more important feel. Notice that I plan to use the h1-tag for the header text, as this tells both non-visual browsers and search engines that this text is important. You can also define styles for the h2-tag this way, if you want to have a subtitle in the header.
