Introduction
Ever tried to create a page layout with only CSS that worked across all Web browsers?
I have, and it's no picnic. This is one of those times where you have to ask yourself, "Is the juice worth the squeeze?" I would have to say emphatically, no. Give up. Don't try it. Leave it for the professionals that work in CSS all day long and who thrive on using CSS hacks.
For me, I'm not ready to dump tables for strictly CSS sites. Plus, there's nothing wrong with using tables for page layout. So how can we create a page layout that's simple and elegant, yet won't bust our mental bank? Read on.
Solution
We'll use both CSS and at least one table to layout our page. We get the benefit of CSS, plus the ease of using just one simple table on our page. Using this table, we can generate any standard layout on the Web today and benefit from the same look across all Web browsers and operating systems, like Mac OSX, without having to use CSS hacks or remember what they do.
Skill Level
Beginner |•••••|•••••| Advanced
Discussion
The example I'll use for our topic today is a simple, but very useful layout. I use this layout on WebsiteManagementTools.com and some other Web sites that I own. The basic structure is a header, followed by the body, and ending with a footer. The body has a left-side navigation bar and an expanding right-side content area. You can find this type of layout everywhere on the Internet.
Header
For our header, we'll use a simple DIV tag with an ID. For what we'll be using it for, a DIV tag will work fine across all Web browsers, and we won't have to worry about using a hack.
<div id="header">
<!-- Site title and top menu can go in this area -->
</div>
The ID attribute acts like a CLASS attribute, but only one is allowed per page. IDs are good to use when marking sections of your Web page that don't repeat, like headers, footers, and content. This helps keeps your style sheet simple and easy to relearn when you're editing your site six months down the road.
To create the actual header, we could embed another table in the header section to handle the top menu and any logo. Or, we could just use styles. Shown here is a simple header that uses only styles.
<h1>Web site name</h1>
<ul>
<li><a href="#">home</a> | </li>
<li><a href="#">products</a> | </li>
<li><a href="#">support</a> | </li>
<li><a href="#">about</a></li>
</ul>
The nice thing here about using standard tags, which are often referred to as Tag Selectors, is that we're not adding any additional markup to the header. We can change the layout simply by updating the style sheet. One thing to remember here, though, when you're overriding the link pseudo-classes, be sure they are in the order of :link, :visited, :hover, and :active. Otherwise, things might no work was you would expect them to.
Our heading is just text, but we'd like to replace the text with an image. We can hide the text and display a background image all from our style sheet. One thing you'll want to remember if you're using images in your style sheet, always specify the image path starting from the root of your site. That way any pages on your site that are not in the root directory can share the same style sheet.
We used a little trick (not a hack) to make the text go away on the H1 tag, we set the text-indent on the H1 tag to a large negative value. This moves our H1 text off the visible part of the page allowing our image to show without the text.
The selector in the style sheet looks like this:
#header h1 {
margin: 0 0 0.25em;
width: 185px;
height: 95px;
background: transparent url(/images/gfx-maxvis.gif) no-repeat;
text-indent: -700em;
text-decoration: none;
}
The margin is to keep our image a little above our top menu. The width and height are the values for our image in the background. And the text-indent and text-decoration are used to eliminate the header text from the page visually.
Here's a tip when working with attributes like margin and padding. Values can be specified in three different ways, which has always been confusing to me. The values are separated by a space.
• 2px 4px 2px 4px = Top Left Bottom Right
• 2px 4px = Top/Bottom Left/Right
• 2px = All
Table
The table is where we layout our real page. Some people call this area "below the fold", I just call it the page. I'll show you the code here and explain why it's laid out this way.
<table width="100%" border="0" cellspacing="0">
<tr>
<!-- begin sidebar -->
<td id="sidebar">
Sidebar goes here...
</td>
<!-- end sidebar -->
<td id="gutter"> </td>
<!-- begin content -->
<td id="content">
Content goes here...
</td>
<!-- end content -->
</tr>
</table>
So basically what we're looking at is a table that has one row and three columns. The center column, which I refer to as the gutter, is optional, but I like to have one there because you can use it to display a repeating image that you can use as a visual separator between the two sides. Also, with the gutter in place, if you want to switch the sidebar to the right, all you have to do is swap the sidebar and content columns.
The only disadvantage to this layout is that the search engine spiders will see your navigation sidebar before your actual page content. This means when this page is indexed, it's possible that the description searchers will see at the search engine will be bits and pieces of your navigation sidebar, not the actual content on your page. You can overcome this problem by switching the sidebar to the right side instead, turn any text into graphics, or put your menu text into Java script.
Footer
The Footer is handled in the exact same way as the header. No need to cover the topic twice.
Summary
This type of page layout is a solid proven design that works across all Web browsers. It's fairly easy to implement and maintain. Using a single row table for the body gives you a lot of flexibility to create any type of multi column layout. It's just a good design to use.
We'll spend more time in the future going over the different techniques you can use to really add life to your page. We may even invite a Web graphics expert for an interview and post it on this weblog.
