Just starting to learn how to hand code websites and need some help putting all the pieces together so the website will actually display correctly? This tutorial shows you from start to finish how to style a header, logo, navigation, content area and footer. Complete this tutorial and you will have a better understanding of how to hand code any website.
A websites’ structure from A to Z
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 <head> of our HTML document
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css">
</head>
Now we’ll dive in and start setting up the basic styling for our site.
- We want to remove the default margins and padding set by the browser.
- We want to use Verdana as the main font for the content and set it as 12px.
- We want links to be bold, underline and with color #4ecdc4 and not underline when on hover state.
- 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
<div id="branding">
<img src="i/branding.jpg" width="515" height="105" alt="Simple Designs :: A web design portfolio by Karinne Legault">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
Now we need to hide the <h1> and <h2> 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.
<div id="navigation">
<ul>
<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="/contact/">Contact</a></li>
</ul>
</div>
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 <head> of your document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
/*** NAVIGATION
********************************/
#navigation ul li a {
width: 10px;
}
About The Author
Article By: 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.
You can view other posts by Karinne Legault. Or you can visit Karinne's website at: http://www.karinnelegault.com/
Loading ...
July 11th, 2008 at 3:14 am
I enjoyed your writing style and I’ve added you to my Reader. Keep these posts coming.
July 11th, 2008 at 8:38 am
Thank you for the kinds words! I’m currently working on a string of related tutorials so keep a out
July 28th, 2008 at 1:57 pm
i always wanna make my own layout for my IMVU homepage…but well i never can make it happen…ESPECIALLY i have no idea how to change the panel into a button with all the content inside(i never know how to put all panel content in a button that i will make) hope u can help me with all d tutorial..thenkies
August 20th, 2008 at 11:21 am
Pretty nice site, wants to see much more on it!
August 26th, 2008 at 3:09 pm
Awesome tutorial. I’m working on a project now that was going nowhere until I read this. Thanks a million!
August 27th, 2008 at 8:36 am
@Dolly - If you need help, check out the Squeeze Forums! Tons of people there to help out!
@ John - Thank you!
@Kay - That’s great! Glad we could help! Sign up on the Squeeze Forums if you need more help!
October 26th, 2008 at 10:21 am
Your Web Site is really wonderful and I bookmarked it. Thank your for the hard work you must have put in to create this wonderful facility. Keep up the excellent work!
November 24th, 2008 at 9:00 am
What a cool!
I’m a newbie in web design.
I learned lots of things from you.
Thanks.
November 26th, 2008 at 1:10 pm
I tried the Tutorial @ http://www.cjanddarren.com It doesn’t like me. Any help would be appreciated. (links not working yet, trying to get the page to look right before I create the rest)
November 26th, 2008 at 3:17 pm
@Thoric - You forgot to add a #content-wrapper that will clear the floats. See page 3 of the tutorial - http://www.thewebsqueeze.com/tutorials/a-websites-structure-from-a-to-z.html/3/. Or you can add a clearing div just above the #site-info div.
December 3rd, 2008 at 3:44 pm
Add to my Bookmarks )