• Home
• Products
• Tutorials
• Extensions
• Support
• Company
  

• Part 1: Building the Page
• Part 2: IE Workarounds
• Part 3: Making it pretty

Part 3: Making it Pretty

After completing parts 1 and 2 we've got a stable 3-column layout. Let's pretty it up a bit by adding a background image and some CSS enhancements.

Download the images

Before we begin, you'll need to download the images we'll be using. Unzip 3ColFlexImages.zip and move the 4 images inside to a folder inside your local site. A good name for the folder would be images.

Download tutorial images

CSS Revisions and Additions

 

Here is the revised style sheet we'll be using:

body {
background-color: #FFF;
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
min-width: 970px;
font-size: 100%;
padding: 0;
background-image: url(images/hand.gif);
background-position: -44px 0px;
background-repeat: no-repeat;
margin: 130px 10px 10px 10px;
}

We set a font-family for the document. Then we set background-image to hand.gif and use the background-position property to set the image's left position to -44px so that the image's right edge lines up with the left edge of the center column.

We set background-repeat to no-repeat to prevent the image from tiling. We set the top margin to 130px to ensure that the masthead lines up vertically with our background image. All other margins are set to 10px.

#wrapper {
margin: 0px auto;
width: 100%;
display:table;
border-spacing: 3px;
border-collapse: separate;
}

We set border-spacing to 3px and border-collapse to separate so that each column is in its own bordered box with 3px of separation between each box.

#firefox-bug-fix {
display:table-row;
}

When you declare an element to display:table and then set a child (nested) element inside it to display: table-cell, the specificiation calls for browsers to imply that there is a table-row element surrounding the table-cell elements. All modern browsers get this correct—except for Firefox. While Firefox will behave on simple pages, more complex pages will be problematic. This rule, assigned to an inner wrapper will ensure that your page always displays correctly in Firefox.

.columns {
display: table-cell;
border: 1px solid #000;
vertical-align: top;
line-height: 1.5em;
}

We set line-height to 1.5em to make our text easier to read.

#c1, .c1 {
background-color: #326698;
color: #FFF;
padding: 20px;
width: 180px;
min-width: 180px;
font-size: .7em;
background-image: url(images/columns_blue.jpg);
background-repeat: no-repeat;
}

We set font-size to .7em. We then set background-image to columns_blue.jpg and instruct it to not repeat. Note the the background image is a gradient that ramps vertically from a light blue to a darker blue—which is precisely the same blue that we set for the background-color.

#c2, .c2 {
background-color: #FFF;
width: auto;
padding: 20px 32px;
font-size: .8em;
}

We set font-size to .8em and adjust the left and right padding to 32px.

#c3, .c3 {
background-color: #D7D7D7;
width: 180px;
min-width: 180px;
padding: 20px;
font-size: .7em;
background-image: url(images/columns_gray.jpg);
background-repeat: no-repeat;
}

We set font-size to .7em. We then set background-image to columns_gray.jpg and instruct it to not repeat. Note the the background image is a gradient that ramps vertically from a light blue to a darker blue—which is precisely the same blue that we set for the background-color.

#masthead {
padding: 27px 3px 10px 228px;
}

We set padding on the masthead to allow its contents to line up nicely with the body background image.

h1, h2, h3 {
font-size: 1.35em;
text-transform: uppercase;
letter-spacing: 0.35em;
margin: 0px;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

We style level 1 through 3 heading elements.

h2, h3 {
font-size: 1.1em;
margin: 30px 0 0 0;
font-weight: bold;
letter-spacing: normal;
}

We set exception rules for level 2 and 3 heading elements.

h2.topper, h3.topper {
margin: 0;
}

We create a class that is assigned to heading elements that are placed at the tops of columns and set its margin to zero.

p {
margin: 6px 0 12px 0;
}

We assign custom margins to all paragraphs.

.footer {
font-size: .65em;
text-transform: uppercase;
letter-spacing: 0.25em;
}

We style the footer.

That's it for the CSS.

A final stylistic touch...

As a final touch, insert the quill3.gif image in the right column, at the top.

A quick IE Workaround...

Because of the changes we made to the style sheet, we have one simple workaround to make inside the IE style sheet. Locate the special IE style sheet in the head of your document:

<!--[if lte IE 7]>
<style>
#c1, #c2, #c3 {background-color: transparent; border: 0; padding: 0;}
#msie td {vertical-align: top; border: 1px solid #000;}
#msie {border-collapse: collapse; border-spacing: 0;}
.c2 {width: 100%;}
</style>
<![endif]-->

Add background-image: none; to the first rule so it looks like this:

<!--[if lte IE 7]>
<style>
#c1, #c2, #c3 {background-color: transparent; border: 0; padding: 0; background-image: none;}
#msie td {vertical-align: top; border: 1px solid #000;}
#msie {border-collapse: collapse; border-spacing: 0;}
.c2 {width: 100%;}
</style>
<![endif]-->

And there you have it...

See Finished page

That's a wrap. No, wait...

More column arrangements

Main column first:

See Example...

Can I add Fancy Menus and Widgets?

You bet. PVII widgetized:

See Widgetized Example...