Slicing the content area
Now we've got our header done (example) it's time to move on to our content layout. We're going to be using floating divs as I've mentioned already, so three columns will be involved. Before we go about adding images, backgrounds and text properties we'll need to figure out a skeleton for the columns.
To start, we'll have to measure the width of one of the side columns. If both columns are the same width, you'll only need to measure one of them - which is true in this instance. If you take out your ruler (CTRL+R, if you've forgotten) and set the guides to the top left point of the gradient image in one of those boxes like the one below:
Before you do anything else, notice that we have a border on all four sides of this image that could easily be recreated using CSS. Instead of taking the whole thing, just select the gradient. If you've already got it selected, you can save time by looking for the Select Menu, selecting "Contract" and entering "1 pixel" in the prompt. If you do the CNP method I introduced to you earlier, the end result will be something like this:
Save it in your layout folder as "content_lc_gradient.gif". Repeat this process for the right hand image and naming it "content_rc_gradient.gif", and you should get this:
You can take the measurements from each of these and you should get 29 pixels high and 167 pixels wide.
Before we do anything else, let's add the HTML bits inside our container div as always, immediately after the end of the header div.
<div id="content">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
At this stage it's time to get into some CSS coding. I'll be giving it to you in chunks and then explaining what each does afterwards.
#left {
width: 169px;
float: left;
}
You'll have noticed that the width is 2 pixels more than the actual image we've just been measuring. This is because the image will have a border which we will add later, and a border on each side that is 1 pixel, will add an extra 2 pixels to the actual length of the image. I mentioned it will be floating, and it is - to the left.
The same is true for the right column:
#right {
width: 169px;
float: right;
}
..only that this time, it's floating to the right.
And finally, for the "main" column, there was some simple maths involved in this. I took the width of the container, which is 800, and took away the width of the left and right columns together (169*2 = 338). At the end of that I was left with 462 pixels. As I wanted to space the content area away from the columns by 10 pixels each way, I added a left and right margin of 10 pixels. Together, they added up to 20 pixels. To get the final width of the main element, I subtracted 20 from 462, leaving me with 442 pixels. To get the column to fit in with the rest of the content area, I floated it to the left again (although it will still work if you float it to the right.) Here's the CSS below:
#main {
width: 442px;
margin: 0 10px 0 10px;
float: left;
}
Once again I used shorthand on the margin properties. The syntax is as follows: margin: [TOP] [RIGHT] [BOTTOM] [LEFT].
The final bit of CSS is for the div classed as "clear". Using the clear property in CSS "cuts off" all hanging floating elements ready for a full width column for all text proceeding that div. You can also put text inside a div with the clear property set - it doesn't make a difference. Anyway, here's the painfully simple CSS below:
.clear {
clear: both;
}
I made this as a class as you might well want to be using it later on in your site's development, so you'll be using it more than once.
Your three columns should now be floating perfectly in the content area. Now that we've got the skeleton set up, it's time to set out to add those heading images we sliced earlier.
We will be using background images, height, padding and border properties for these images. The method of classing I will be showing you in this instance is going to be using the document object model hierachy to have different properties for the same class depending on where it is placed. This effort pays off later when you want to make dynamically generated content and want a general class name for your gradient headings.
Before we go any further, we need to find the colour of the border we will be using. This is easy - select the eyedropper tool from the toolbox in Photoshop, go onto your layout and click on the border pixel. You can access this by double clicking on the colour palette and copying the hex code in the box. Confused? Look in the image below:
Now you can incorporate that colour into your CSS like below:
#content .gradient {
height: 24px;
border: 1px solid #191bcb;
}
Notice how we haven't yet defined the background? This will be done next. I'll explain how it works first..
By proceeding a classname, id or html element with another element, this means that the properties defined will only be accessible if the elements are inside all the elements prefixed. Feeling dizzy? Let me explain a little further:
Say we have a CSS style written out like this:
#inside .red {
color: red;
}
And then we have HTML set out like this:
<div id="inside"><span class="red">This is meant to be red text.</span></div>
<div id="outside"><span class="red">This is meant to be red text.</span></div>
Only the <span> inside the div with the id "inside" would show up as red text. Please note: it's not a good idea to name your classes "red" in a practical situation, but rather use a class name suitable to the purpose of the text that will go in there. Go here for more information.
Now for actual CSS:
#left .gradient {
background: #404ac0 url('layout/content_lc_gradient.gif') no-repeat;
padding: 5px 10px 0 20px;
}
#right .gradient {
background: #404ac0 url('layout/content_rc_gradient.gif') no-repeat;
padding: 5px 20px 0 10px;
}
So in summary, you can use the class name "gradient" in either column. The border and height properties will stay the same, but the background will change depending on which column you put it in. Clever isn't it? You'll also notice the padding is slightly different. This is to make sure the text doesn't overlap the hollow areas in the gradient. There's also a constant of 5 pixels padding on the top to give the illusion that the text is vertically centred too.
That's it for this stage - just the basic content layout. Later on in the guide we will be adding the other background properties as well. On to the footer..