I was asked by an aspiring web designer to tutor him in basic Web design techniques. He is working on a Webpage in tables, but is aware that he should probably start working with CSS instead. He had tried Dreamweaver’s “layers,” but was having a hard time.
In preparation for the 1 hour session I put together a page with a really basic two column layout using CSS positioning. Since I went to all this trouble, I thought I would go ahead and share it with the World Wide Web as well.
The first code on the page, and the first thing to be aware of is the Doctype declaration. I use this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>
Using the “transitional” declarations, rather than “strict” puts the page into “Quirks Mode.” This was necessary to get older browsers to display CSS correctly back in the day, but using today will cause you headaches from all the quirks that will be coming your way.
The code for implementing a CSS page layout should be divided into two parts: HTML for structure, and CSS for formatting. I break the CSS out into a seperate page and link it to my HTML page thusly:
<link href=”test.css” rel=”stylesheet” type=”text/css”>
This goes somewhere between the <head></head> tags.
In the body of the HTML document, you can declare the structure very simply using nested <div></div> tags. I use the “ID” attribute to identify them, but “Class” works too. Here’s the code for my basic two-column page:
That’s it! That’s the basic HTML structure of the page; a wrapper enclosing the other page elements. The size, color, borders, and structural images are all declared in the CSS. The page content, such as navigation and text, will go inside the appropriate <div> tags.
Next, we’re going to format each <div> on our page. I also like to remove the margins from the body like so:
Next we’ll set the width, postion and background of the “wrapper.” This will set the basic page size and color, as well as center the page in the browser. Centering is achieved by setting the left and right margins to “auto.”
The header is nested inside the wrapper div. The header image is set as the background.
background-image: url(‘images/header.jpg’) ;
The left column is going to contain the navigation, which I’ll add in the next CSS tutorial. Notice that I have set the background color to the same color as that of the wrapper div. This is because we want this column to appear to extend to the bottom of the page. In reality, it will shrink to contain the content. Floating the div left will allow the column to sit side by side the column 2, which will float right.
Lastly, I position the footer. Note the “clear” declaration, which tells the browser not to position the previous divs beside this one. Also note that the left and right padding are added to the overall width of the div, so you need to subtract those amounts from the total width to match the width of the wrapper and header, which have no padding.
Next time, we’ll fill our page with some navigation and content.