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:
The menu of the inspiration piece.
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:
Menu at the end of step 7.

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:
The inspiration date format.
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:
Inspiration meta section.
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:
The meta section at the end of step 7.

And with that…

We’re done!

Let’s do one final comparison between the inspiration and our rendition:
The Inspiration:
Our inspiration layout.
Our Version (fluid instead of fixed width, column on opposite side):
Our final version.

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

13 thoughts

  1. Hi Nicole,
    Thanks for fixing the link on the last page… I’m so happy to have finished this tutorial. I feel I have learned so much, and I am so grateful for you sharing 🙂
    I have question tho’… in the last section, why do you repeat the “div#content p.meta” twice when you bold and right-align it? I didn’t understand that part, and when I removed one of them, I didn’t notice a difference…
    Thank you again!

  2. &#34;why do you repeat the “div#content p.meta” twice when you bold and right-align it?&#34;
    Good grief… I must have had a typo day when I did this last step. You’re right, it doesn’t need to be repeated. I’ll fix it – thanks a bunch! You’re being a great editor 🙂

  3. How do you repeat the menus on each web page. I want to only modify one document to keep the menus up to date. I only know how to do this through some PHP includes. Can this be done in CSS?

  4. @Scott

    CSS is not used for managing content, it’s used for manipulating and displaying pre-existing content. Meaning that it is for style purposes.

    You are absolutely on the right track with PHP includes. Templating your pages in that way (breaking them into chunks for different parts of the pages) can save a huge amount of time in updating. If you don’t want to use PHP, Server Side Includes (SSI) will work in the same manner. Most web strong languages have that capability (ASP does also, for instance), so you definitely have options.

    You can try Google for some instructions in how to do this for other languaes depending on what you want to try, but if you know how to do it in PHP and you don’t mind using it … then by all means. You’re on the right track there.

  5. I have gone to the Summer Fields Layout. However, I would love to add a right column for affiliates. I am having a very hard time doing this. Your help would be greatly appriciated. Thanks

    Scott

  6. This what I’m looking for. Thank you very very much for the excellent tutorial. I’ve learn a lot from this tutorial.

    Keep up your good works

  7. Hi Nicole,

    I tried doing the dates also as given in the inspirational design, can you please check and tell me if I have done it in the right way…

Leave a Reply