For those of you coming in late, you may reference the related entries to catch up (quick reads, I promise).

Last time we began filling our template and creating our stylesheet. Just some basics, where we defined a primary content area.

index.cfm

view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5        <title>Untitled Document</title>
6        <link href="css/default.css" rel="stylesheet" type="text/css" media="screen" lang="en" title="Default Site Stylesheet" />
7    </head>
8    
9    <body>
10    
11        <div id="totalBody">
12            <p>Here&rsquo;s the body</p>
13        </div>
14    
15    </body>
16</html>

css/default.css

view plain print about
1@CHARSET "ISO-8859-1";
2
3body {
4    text-align: center;
5    font-family: Arial, Helvetica, sans-serif;
6    font-size: 10pt;
7    margin-top: 0px; }
8
9td {
10    font-family: Arial, Helvetica, sans-serif;
11    font-size: 10pt; }
12    
13#totalBody {
14    margin-left: auto;
15    margin-right: auto;
16    margin-top: 5px;
17    width: 999px;
18    text-align: left; }

Now it's time to begin filling in our content area. Most documents/sites need some sort of header block for logos and titles, and maybe even a basic menu. So, first things first, let's add in a header area.

view plain print about
1<div id="totalBody">
2 <div id="headerBlock">
3 <div id="headerText">
4 <h2>This is my header block</h2>
5 </div>
6 <div id="headerMenu">
7 <p>Header Menu will go here</p>
8 </div>
9 </div>
10 <p>Here&rsquo;s the body</p>
11</div>

So, where do we go from here? Let's apply some style! Let's start off with our header block. I like to use images as backgrounds so that I can easily lay text in a block without worrying about absolute positioning. Currently the big issue with setting width and height attributes on block level elements is the box model. I'm not going to go into detail on this here, since there is already an extreme amount of information on the net already, but I would suggest you research it at Quirksmode.

I'll take something that I've already sized the way I would like it and place it in the images directory off of my root. Then I'll add the following to my stylesheet:

view plain print about
1#headerBlock {
2 width: 997px;
3 height: 175px;
4 color: white;
5 background-image: url('../images/headerimage.jpg'); }

That will place an image as the background of my entire header block, including behind the menu. Notice that the width is 2 pixels less than the width of the totalBody Div. You might want to look up that Box Model issue. Also notice the url path of the background-image attribute. Your image is relative to the css document itself (except in Netscape 4, but who uses that anymore? [Thanks to Sandy Clark for that tidbit off of CF-Talk last week]). Next we'll set the width and height, and such, of the headerText block:

view plain print about
1#headerText {
2 width: 995px;
3 height: 140px;
4 font-weight:bold; }

OK, then you can set up your headerMenu block. For horizontal menus I still utilize a table, since data output in a tabular format is what tables are for. Without special styles formatting for it's display, a div will always follow directly underneath another div. Knowing that, the menu table I place inside it will be directly below my headerText block. But, that's enough for now. Next time around we'll place in the menu, and start adding some 'pods' to our primary content area, after which we'll start getting in to the real juice of our series. Dynamic content how-to.