Coding a layout
Edit: Added display: inline; to #text and #sidebar because of IE6 bugs.
You reached the coding part of the tutorial. The first part is here, it explains how to make this simple layout in Photoshop. We're going to code the simple layout we made here. First, let's prepare our HTML file. Put all the codes we'll need first. Between <head> and </head>, don't forget to link the HTML file to style.css that we will create afterwards:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Between <body> and </body>, here are the div we need:
<div id="container">
<div id="header"></div>
<div id="menu"><!--menu links--></div>
<div id="main">
<div id="text"><!--contents--></div>
<div id="sidebar"><!--sub navigation--></div>
</div>
</div>
To see the full source, go to this page, right click and select "View Source".
Now, make a new file and save it as style.css First, we're going to style body and div#container. Because all browsers don't render colors the same way, I suggest making a new little image filled with our solid color and set it as background. 
I'll call this image body.jpg! We need to adjust the "container" width to our design and align it center, then set background.jpg as its background:
body {
margin: 0px;
padding: 0px;
background: #ffcc00 url(images/body.jpg) repeat;
}
#container {
width: 760px; /* Must be the same width as your images */
background: #FFF url(images/background.jpg) repeat-y;
margin: 0px auto;
padding: 0px;
}
Now we have this page. And the next step is to set the header image. We won't use "inline image" (that is to say, insert the image with HTML in the page) but we'll use CSS background. We'll set a background to div#header:
#header {
width: 100%;
height: 229px; /* Must be the same height as header.jpg */
background: #FFF url(images/header.jpg) no-repeat;
}
See page in action. Next, we need to use the CSS Rollover (or CSS Sprite) trick to do our menu. Please read the tutorial so that I won't need to re-explain here ^^; Here is the menu code in the HTML file:
<div id="menu">
<a href="linkone.html" class="one"><var>Link one</var></a>
<a href="linktwo.html" class="two"><var>Link two</var></a>
<a href="linkthree.html" class="three"><var>Link three</var></a>
<a href="linkfour.html" class="four"><var>Link four</var></a>
<a href="linkfive.html" class="five"><var>Link five</var></a>
<a href="linksix.html" class="six"><var>Link six</var></a>
</div>
We will style it like in the CSS Rollover tutorial. Here are the dimensions of the links we need (click to enlarge):
#menu {
width: 100%;
height: 40px;
}
#menu var { /* hides the text link */
visibility: hidden;
}
#menu a {
text-decoration: none;
display: block;
float: left;
height: 40px;
}
a.one {
width: 141px;
background: url(images/menu.jpg) no-repeat 0px 0px;
}
a.two {
width: 119px;
background: url(images/menu.jpg) no-repeat -141px 0px;
}
a.three {
width: 133px;
background: url(images/menu.jpg) no-repeat -260px 0px;
}
a.four {
width: 120px;
background: url(images/menu.jpg) no-repeat -393px 0px;
}
a.five {
width: 118px;
background: url(images/menu.jpg) no-repeat -513px 0px;
}
a.six {
width: 129px;
background: url(images/menu.jpg) no-repeat -631px 0px;
}
a:hover.one {
background: url(images/menu.jpg) no-repeat 0px -40px;
}
a:hover.two {
background: url(images/menu.jpg) no-repeat -141px -40px;
}
a:hover.three {
background: url(images/menu.jpg) no-repeat -260px -40px;
}
a:hover.four {
background: url(images/menu.jpg) no-repeat -393px -40px;
}
a:hover.five {
background: url(images/menu.jpg) no-repeat -513px -40px;
}
a:hover.six {
background: url(images/menu.jpg) no-repeat -631px -40px;
}
See page in action. In my opinion, biggest part is done. What's left to style is div#main that includes: div#text (our text), div#sidebar (our sidebar with subpage navigation) and div#footer for copyright notes, etc.
We're going to have our text at the left and our sidebar at the right using floats. Our footer will stick at the bottom of everything. Before everything, note that...
#text width + #text margins + #sidebar width + #sidebar margins must be equal to 760px, our design width.
#main {
width: 100%;
clear: both;
}
#footer {
width: 100%;
clear: both; /* absolutely necessary! */
}
#text {
float: left;
display: inline; /* IE6 fix */
width: 500px;
margin: 0px 15px; /* means 0px on top and bottom and 15px on left and right*/
}
#sidebar {
float: right;
display: inline; /* IE6 fix */
width: 200px;
margin: 0px 15px;
}
/* 500 + 200 + 4*15 = 760! :) */
See page in action. Alright, the page structure is finished, now only text and links styles are left. :)
#text p, #sidebar p, #sidebar ul {
font: 12px/19px Arial, Verdana, sans-serif;
color: #666;
}
#text h1 {
font: 16px Georgia, Times, sans-serif;
color: #ff9933;
padding-left: 15px;
}
#text h2 {
font: 14px Georgia, Times, sans-serif;
color: #ff9966;
padding-left: 30px;
}
#text a {
text-decoration: none;
color: #cc6633;
}
#text a:hover {
text-decoration: underline;
color: #ff6600;
}
#sidebar h3 {
font: 16px Arial, Verdana, sans-serif;
color: #ff9933;
}
#sidebar a {
text-decoration: none;
color: #999;
}
#sidebar a:hover {
text-decoration: underline;
color: #666;
}
#sidebar ul.subpages {
margin: 0px;
list-style: square;
}
#sidebar ul li a, #sidebar ul li {
text-decoration: none;
color: #ff6600;
}
#sidebar ul li a:hover {
background-color: #ffffcc;
color: #ff6600;
}
Our finished page. Of course, keep in mind that this is a very basic layout, you can add more styling ^^
Simple layout sample files (85.4 KB, 623 hits)
15 Responses to “Coding a layout”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
I was just wondering if you can explain me about coding a layout? I'm a little confuse with you tutorial. And I'm not use to using CSS. So I was wondering if you can explain it to me? Thank you.
it works great in ie, but for some reason in mozzila the container image seems to be missing???
Hi! Thanks for the tutorial, I loved! But I'm having a few problems wih it... like the footer, when the pc resolution is bigger them the layout + text, it (doesn't) shows a weird footer. And I can't use ` or ยด...
xP
Thanks for this tutorial! It really helps! But I was wondering how you would be able to make the layout with this tutorial by using an image map and iframes. How do you do that?
Hi, does this layout work for blogspot? because I'm stumped, right from the start.
Is it possible if you can show the full set of html codes? Thanks.
Thank you for this tutorial, it's very thorough and easy to follow. But like jtiz, I am having the same problem with how the container background image is missing when I use mozilla but works perfectly when I use IE. Could you please help me with this? :) Thank you!
hi, i have a question, is it better to use a liquid css layout (one that the size of the layout change depending on the monitor size) or a non-liquid css layout (one that has a definite size)?
wa!!! soo cooll though it took me 6hrs plus to finish my masterpiece, hehe
thx!!!
i'm still working on the foot note
nweiz thx very much keep up pal!
thanks, this helped me out so much!
nice tutorial. this helped me out :)
Thank you so much! I've always been a bit scared of css but now I understood it's really handy. So..I made a lay with this. If you wanna see the result, look my website. ^^ There's just one thing I don't quite understand. There's a blank area under the menu. Where did that come from since it wasn't there in your version? oO I tried to follow the tutorial accurately.
This whole tutorial has got me really confused. I'm usually not so terrible at this kind of stuff but nothing's working for me. The only thing that shows up is my header and the background. Then it just shows the part of the code that obviously isn't working. Help?
I'm having the same problem as Chela above me, my codes arent working.
the only thing that shows up is my design and then messed up codes. I don't understand what I'm doing wrong.
I would really appreciate it if I could get some help.
Thanks. :]
yay! i've been trying really hard to figure out how to code a layout, and your tutorial is the only one i really understand.
thank you so so so so much!
just one thing, sorry. there's still an underline on my menu links, not the rollover ones. and then when i do rollover, there's a white underline that sticks out off of the edge.
i have the text decoration: none; thing, but it's still like that.