The Web Squeeze

• Home
• About
• Magazine
  • News
  • Articles
  • Tutorials
  • Podcasts
  • Interviews
  • Reviews
  • Tips & Tricks
• Forum
• Write
• Contact

• News
• Articles
• Tutorials
• Podcasts
• Interviews
• Reviews
• Tips & Tricks

You created a great design for you website but now you’re not sure how to start coding it? How to structure it? How do you use CSS to display that beautiful design in the browser? Well… this tutorial should answer all those questions.

A mock-up

A rather simple design for the company Simple Designs.

Visualizing the structure

Now with a design in mind, you should see 5 sections: Branding, Navigation, Content, Sidebar and Site Info.

Start with the mark-up

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

You'll notice that I kept the same titles we used to define our sections in the HTML. Most often than not, you will see designers use HEADER instead of BRANDING but BRANDING is a much more meaningful word that describes the content for this div. Same reasoning with SITEINFO. Many use FOOTER but what's in a footer? Site information is usually in there like address or phone numbers or just more information pertaining to the site. Always try to be as descriptive as possible when creating your sections (ID)

Now that we have our structure skeleton all checked, let's add the content.

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I create clean, simple and usable websites for small business and organizations

This is my web design portfolio.

I'm a designer and a coder. I can create a site from an idea or take an existing site and make it more accessible and search engine friendly without costing you an arm and a leg.

Have a look around and contact me when you're ready. Hopefully I can help you get the idea
from your mind onto the web.

Latest additions to the portfolio

If you copy all that code and open it up in your favourite browser, you should basically see what a person on a screen reader will see: content.

While it's not pretty, it serves its purpose. With the headings in place, once can look at the content and discern the areas and read the website like a book.

Let's style it!

We will be putting all our styles in a separate stylesheet called styles.css so let's add a link to this in the of our HTML document

Now we'll dive in and start setting up the basic styling for our site.

1. We want to remove the default margins and padding set by the browser.
2. We want to use Verdana as the main font for the content and set it as 12px.
3. We want links to be bold, underline and with color #4ecdc4 and not underline when on hover state.
4. Assign the different size and colors to the different headings used throughout the site.

/*** COMMON ELEMENTS
********************************/

html, body {
    margin: 0;
    padding: 0;
}

body {
    font: 12px Verdana, Geneva, sans-serif;
    background-color: #fff;
}

a:link, a:visited, a:active {
    color: #4ecdc4;
    font-weight: bold;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

h2 {
    color: #556270;
    font-size: 24px;
}

h3 {
    color: #c44d58;
    font-size: 18px;
}

h4 {
    color: #c44d58;
    font-size: 14px;
}

Now that we've settled the basic styling for our common elements, we'll tackle each section individually.

One thing you notice when you look at the mock-up provided; there are a lot of colors and bars and big backgrounds, etc... but all this design will be using is 4 images. The rest will be set in the CSS.

BRANDING

Our branding will use the nice image to display the company name and slogan so we need to add that image in our HTML

Now we need to hide the

and

by setting the two elements to position: absolute; and giving them a text-indent: -9999px;. This method was first introduced by Mike Rundle back in August of 2003 and I believe it to be the most accessible image replacement.

/*** BRANDING
********************************/

#branding {
    background: #fff url(../i/branding-bg.jpg) repeat-x 0 0;
    height: 118px; /* 142px */
    padding-top: 24px;
    overflow: hidden;
}

#branding h1, #branding h2 {
    position: absolute;
    text-indent : -9999px;
}

NAVIGATION

We will be using a list to display the navigation. As explained by Mark Newhouse in his Taming List article from A List Apart magazine:

These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

• Home
• About
• Services
• Portfolio
• Contact

And the CSS:

/*** NAVIGATION
********************************/

#navigation {
    background: #fff url(../i/navigation-bg.jpg) repeat-x 0 0;
    height: 65px;
}

#navigation ul {
    margin: 0;
    padding: 0 0 0 15px;
    list-style: none;
}

#navigation ul li {
    float: left;
    display: inline;
    padding-right: 10px;
}

#navigation ul li a {
    height: 29px;
    min-width: 10px;
    color: #000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    padding: 6px 7px 0;
}

#navigation ul li a:hover {
    background-color: #7fefe7;
}

In the #navigation ul { }, the list-style: none; property is what removed the bullets from the unordered list element. display: inline; and float: left; will set the list elements to display in a line.

A simple hack

If you look at the present site in Internet Explorer 6, you will notice that the navigation is not displaying inline. This is because IE6 does not support the min-width property. We need to add width: 10px; property for IE6 and we will do this by using conditional comments.

Add this in the of your document

/*** NAVIGATION
********************************/

#navigation ul li a {
width: 10px;
}

CONTENT

Before we start we will add a #content_wrapper div to contain both the #content and the #sidebar div to limit the space used to 780px.

...

...

/*** CONTENT - WRAPPER
********************************/

#content_wrapper {
width: 760px;
overflow: hidden;
padding: 0 10px;
}

The overflow: hidden; property is there to clear the floats:

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

The CONTENT and SIDEBAR area are side by side. We will be floating both of them; one left and one right. Never use absolute positioning or relative positioning for such simple tasks. The float property is much simpler.

/*** CONTENT
********************************/
#content {
    float: left;
    width: 480px;
}

/*** SIDEBAR
********************************/
#sidebar {
    float: right;
    width: 230px;
}

Pretty simple huh? Hang in there... we're almost done!

SITE INFO

For the site info, we will do the same thing with did with the CONTENT section and that is add a #siteinfo_wrapper to contain the information in a 780px box.

...

...

Since we've already declared this information for the #content_wrapper, we will just add in the #siteinfo_wrapper to the declaration.

/*** WRAPPERS
********************************/

#content_wrapper, #siteinfo_wrapper {
    width: 760px;
    overflow: hidden;
    padding: 0 10px;
}

As with the content section we have 2 areas that we will float; again... one left and one right.

/*** SITE INFO
********************************/
#siteinfo {
    background: #fff url(../i/siteinfo-bg.jpg) repeat-x 0 0;
    height: 70px;
    color: #fff;
    font-size: 11px;
    margin-top: 15px;
}

#siteinfo .one {
    float: left;
    width: 480px;
    padding-top: 18px;
}

#siteinfo .two {
    float: right;
    width: 230px;
    padding-top: 18px;
}

We also have added a supplementary navigation to the SITE INFO that we have put in a list again.

• Home
• About
• Services
• Portfolio
• Privacy
• Contact

Copyright © 2008 Karinne Legault

Proudly hosted by HostingCompany

And the CSS should look like this

ul.sup_nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.sup_nav li {
    display: inline;
    border-right: 1px solid #fff;
    margin-right: 10px;
    padding-right: 10px;
}

The colors of the links need to change from the turquoise to white.

#siteinfo a:link, #siteinfo a:visited, #siteinfo a:active {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

#siteinfo a:hover {
    text-decoration: none;
}

We're done!

SOME EXTRAS

Notice that this doesn't exactly look like the original mock-up; the portfolio boxes are still one under the other, it's missing that pink "About" box and the green background for the date so... if you have some time, here's the code to get all those things sorted.

Portfolio boxes

This is a simple matter of floating each of them

.portfolio {
    float: left;
    width: 145px;
    height: 105px;
    margin-right: 5px;
}

.portfolio a:link img {
    border: 1px solid #4ecdc4;
}

The big pink "About" box

By simply adding a background and some padding to the div containing the "About" info, you can make simple things like this stand out

#sidebar .short_about {
    background-color: #ff6b6b;
    padding: 8px;
}

.short_about h4 {
    color: #000;
    margin: 0;
}

.short_about a {
    color: #000;
}

.short_about a:hover {
    text-decoration: none;
}

We've also changed the color of the heading and link color

Green background for dates

Again, just adding some background here

.latest_dates {
    background-color: #c7f464;
    font-size: 9px;
}

Conclusion

Creating the mark-up is the most important factor here. Once you have it defined perfectly, you can change the look of a site without even diving into the HTML.

A perfect example of this is the CSS Zen Garden. Every design uses the exact same HTML file. Only a different CSS stylesheet (and accompanying images) are loaded.

Happy coding!

Demo/Downloads

• View the demo
• Download the ZIP file

Did you like it? Share it!

About The Author

Karinne Legault

Karinne Legault has 10 years of experience in the Web Design industry. You can see her portfolio at karinnelegault.com and her blog at karinne.net.