Two-Column Tableless Layout – Step 7

In our last step we did quite a lot of cleaning up the content section, and now we’re going to put the finishing touches on the design in this step. We’re going to add the little arrow to the menu area that I mentioned back in step 3. We’ll style the footer a bit, and add a little extra link to our content area. So let’s get started finishing this thing!

First things first, let’s go ahead and put in that little decorative arrow in the menu headers. If you remember our menu headers in the inspiration looked like this:

We want to mimick that arrow effect in ours, so we’ll need to add the arrow graphic. I’ve gone ahead and made one for you to use (you can download it here and rename it arrow.gif) so please grab that now.

Once you have the image, and have named it arrow.gif, making the header have that arrow is as simple as giving it a background image. Find the menu section of your CSS, and locate this rule:

div#menu h2 { color:#ffc; font-size: 1.1em; font-weight:normal; padding: 2px 0 3px 18px; border-bottom: 1px solid #666; margin: 2px 5px 10px 5px; font-family:arial; letter-spacing: .25ex;}

All you need to do now is add the following to that rule:

background: #000 url(arrow.gif) left center no-repeat;

Here’s what mine looks like now:

Next, let’s tackle that neglected footer. We’re going to keep it relatively simple, but providing a touch of spacing and smoothness won’t go unnoticed. So first off, find the following section in your CSS:

/* Footer */
div#footer {height: 2em; margin:0; text-align:center;}

We’re going to expand on that by styling the paragraph that holds the footer information. Add the following three lines to that section:

div#footer p { padding-top: 5px; font-size: .9em;}
div#footer p a:link, div#footer p a:visited {color:#000; text-decoration:none}
div#footer p a:hover {text-decoration:underline;}

I also went ahead and added a little extra text to the footer section so that it said more than just ‘footer’ but it’s still in the same paragraph tags.

Moving on, let’s look at the last thing to do on this design, and that’s considering the content area. In the inspiration design, it was a blog layout and displayed a unique format for the date:

Since we are making a general site design instead of a blog / news specific one, we’re going to skip that formatting. However, there was some meta information below the content area that we will attempt to add in one way. In the original design, it looked like this:

I’d like to create something similar to that using just a simple ‘read more’ link below the main sections. Below each paragraph section I’ll add a paragraph like this (in bold):
facilisi.</p>
<p class="meta"><a href="#">Read More...</a></p>
<h2>Another Section</h2>
You’ll notice I’ve given it the class name ‘meta’ and that’s what we’ll use in the CSS to style this last part. To start doing that, locate the following line of code in your CSS content section:
div#content p {padding: 0 1em;}
Below that line, we’ll add three more lines. In plain english we’re telling the CSS to look for a div with the id ‘content’ where it has a paragraph (p) inside with a class name ‘meta’ and then adds the rules accordingly to those.:
div#content p.meta { font-weight:bold; text-align:right;}
.meta a:link, .meta a:visited {color:#000; text-decoration:none;}
.meta a:hover {text-decoration: underline;}

When you have that done, your content area should have a meta section that looks like this:

And with that…

We’re done!

Let’s do one final comparison between the inspiration and our rendition:
The Inspiration:

Our Version (fluid instead of fixed width, column on opposite side):

I hope you enjoyed the tutorial, and you’ll be able to view the final version with code if you got lost somewhere along the way. Further, I’ll be tweaking the design further and making it a free downloadable template, so keep an eye out for that.

~Nicole