Web Design and Web Development Help

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.

<div id="content_wrapper">

<div id="content">

...

</div>

<div id="sidebar">

...

</div>
</div>

/*** 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.

<div id="siteinfo">
<div id="siteinfo_wrapper">

<div class="one">
...
</div>

<div class="two">
...
</div>

</div>
</div>

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.

<div id="siteinfo">
<div id="siteinfo_wrapper">
<div class="one">


    <ul class="sup_nav">
        <li><a href="/">Home</a></li>
        <li><a href="/company/about/">About</a></li>
        <li><a href="/services/">Services</a></li>
        <li><a href="/portfolio/">Portfolio</a></li>
        <li><a href="/company/privacy">Privacy</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>

    <p>Copyright © 2008 Karinne Legault</p>

</div>

<div class="two">

    <p>Proudly hosted by <a href="">HostingCompany</a></p>

</div>

</div>
</div>

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

Pages: 1 2 3