Full Version: Trouble With My Template
Yeah, I'm having a bit of trouble with my template. As you can see, at the bottom of the screen, there's an image and some text. That is supposed to be right below the stuff inside the template, but for some reason it's not wanting to go there... Here is a ZIP file containing all the files, with images included. This is a image of what the template is supposed to look like. If I could get some help on fixing this, I'd really appreciate it.
Edit: I'm sorry that wasn't the problem, Looking into now, I'm going to rewrite the code, hopefully simplifying it a bit for you
Mk, thanks. Change whatever needs to be changed in the code. I only know the basics of HTML and CSS O.o
Alright, sorry bout that needed to eat dinner 
.
I basically re did the code, I didnt use your content, images, or colors. But this is the general way to create a 2 column css template with a header and footer.
I wasn't sure if you didnt have it centered on purpose, i centered the below code. That's the "outer" div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Untitled 3</title>
<style>
body {
margin:20px;
background:#fff;
color: #000;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}
#header {
height:60px;
background:#0e0e0e;
color: #fff;
}
#bar {
height:25px;
background:red;
color:#fff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#menu{
position:relative;
background: #dcdcdc;
color: #fff;
width:650px;
padding:0;
}
#l-col {
float:left;
background:#dcdcdc;
color: #fff;
width:145px;
}
#cont {
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#footer {
height:25px;
background:#000;
color: #fff;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
</style>
</head>
<body>
<div id="outer">
<div id="header" align="center">
</div>
<div id="bar">
</div>
<div id="menu" align="right">
<div id="l-col" align="center">
<h4 align="center">Menu or what ever here</h4>
<br />
Link maybe here
<br />
and here
<br />
and here
<br />
and again here
</div>
<div id="cont">
<div align="center" style="color: red;">Text goes here
</div>
<br />
<p>type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.</p>
<br />
<p>and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.</p>
</div>
</div>
<div id="footer" align="center">Copyright info</div>
</div>
</body>
</html>
Hope that helps you,
Kevin DiGennaro
.I basically re did the code, I didnt use your content, images, or colors. But this is the general way to create a 2 column css template with a header and footer.
I wasn't sure if you didnt have it centered on purpose, i centered the below code. That's the "outer" div.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Untitled 3</title>
<style>
body {
margin:20px;
background:#fff;
color: #000;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}
#header {
height:60px;
background:#0e0e0e;
color: #fff;
}
#bar {
height:25px;
background:red;
color:#fff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#menu{
position:relative;
background: #dcdcdc;
color: #fff;
width:650px;
padding:0;
}
#l-col {
float:left;
background:#dcdcdc;
color: #fff;
width:145px;
}
#cont {
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#footer {
height:25px;
background:#000;
color: #fff;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
</style>
</head>
<body>
<div id="outer">
<div id="header" align="center">
</div>
<div id="bar">
</div>
<div id="menu" align="right">
<div id="l-col" align="center">
<h4 align="center">Menu or what ever here</h4>
<br />
Link maybe here
<br />
and here
<br />
and here
<br />
and again here
</div>
<div id="cont">
<div align="center" style="color: red;">Text goes here
</div>
<br />
<p>type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.type your first block of text here.</p>
<br />
<p>and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.and your second here.</p>
</div>
</div>
<div id="footer" align="center">Copyright info</div>
</div>
</body>
</html>
Hope that helps you,
Kevin DiGennaro
Could you explain it? I'm not really seeing how to incorporate that with my template.
its the whole new coding hes giving you. just use this instead of whatever code you have..
Yes I can. Basically your template contains a header and two columns side by side under your header. I think you know this much, but for your header you need to have a div tag. Since we want it to show up at the top of the screen we'll type it first.
For the Css you only need to really have a couple attributes. The height, the background color, and the color of the text.
Okay that's the easy part and I think you already know how to do that by looking at your code.
Now comes the colums, this is the part that can get a little tricky.
First we'll do the left side. In you're page it is a nav bar.
the "menu" div specifies the size of the menu. The "lclm" div specifies the position.
The css looks something like this.
for the menu we have the position and and width basically. This is going to specify the width of the menu section the height isn't necessary because you want to extend if you add more links.
The "lcol" shows the position of the text. we want it to float left.
The "cont" section is where your content goes, remember to use the <h1> tags for headers and the <p> for paragraphs along with <br/> for line breaks.
Css same concept as before.
Hope that helps.
Even more I hope I made sense...lol its late here...lol.
Good luck,
Kevin
CODE
<div id="header">
</div>
</div>
For the Css you only need to really have a couple attributes. The height, the background color, and the color of the text.
CODE
#header {
height:60px;
background:#0e0e0e;
color: #fff;
}
height:60px;
background:#0e0e0e;
color: #fff;
}
Okay that's the easy part and I think you already know how to do that by looking at your code.
Now comes the colums, this is the part that can get a little tricky.
First we'll do the left side. In you're page it is a nav bar.
CODE
<div id="menu" align="right">
<div id="l-col" align="center">
<h4 align="center">Menu or what ever here</h4>
<br />
Link maybe here
<br />
and here
<br />
and here
<br />
and again here
</div>
<div id="l-col" align="center">
<h4 align="center">Menu or what ever here</h4>
<br />
Link maybe here
<br />
and here
<br />
and here
<br />
and again here
</div>
the "menu" div specifies the size of the menu. The "lclm" div specifies the position.
The css looks something like this.
CODE
#menu{
position:relative;
background: #dcdcdc;
color: #fff;
width:650px;
padding:0;
}
#l-col {
float:left;
background:#dcdcdc;
color: #fff;
width:145px;
}
position:relative;
background: #dcdcdc;
color: #fff;
width:650px;
padding:0;
}
#l-col {
float:left;
background:#dcdcdc;
color: #fff;
width:145px;
}
for the menu we have the position and and width basically. This is going to specify the width of the menu section the height isn't necessary because you want to extend if you add more links.
The "lcol" shows the position of the text. we want it to float left.
The "cont" section is where your content goes, remember to use the <h1> tags for headers and the <p> for paragraphs along with <br/> for line breaks.
CODE
<div id="cont">
<br />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.</p>
<br />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.</p>
</div>
<br />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.</p>
<br />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.</p>
</div>
Css same concept as before.
CODE
#cont {
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
Hope that helps.
Even more I hope I made sense...lol its late here...lol.
Good luck,
Kevin
Id reccomend using a different menu code. Something like
Thats what i use, obviously you will have to edit it to fit your layout, but it make your code nicer instead of <div id="link"> for every link.
You use this code like...
Also in your code you posted k.digennaro
you can simplify it to
Notice the border statement is all in one line and where you had background i changed it to background-color as thats all you were using. If you want the border only on the right use border-right: then the border code after it, you can also use border-left, border-top and border-bottom.
CODE
.menu {
width:200px;
margin:0;
float:left;
}
.menu li a {
height: 30px;
voice-family: "\"}\"";
voice-family:inherit;
height:19px;
text-decoration:none;
font:bold 70% arial,sans-serif;
}
.menu li a:link,.menu li a:visited {
color:#000;
display:block;
background: #efeeee url(images/vnavbg.gif);
border-bottom:1px solid #e3e3e3;
padding:8px 0 0 10px;
}
.menu li a:hover {
color:#7b7b7b;
background: #363c49 url(images/vnavbgover.gif);
padding:8px 0 0 10px;
}
.menu ul {
list-style:none;
margin:0;
padding:0;
}
width:200px;
margin:0;
float:left;
}
.menu li a {
height: 30px;
voice-family: "\"}\"";
voice-family:inherit;
height:19px;
text-decoration:none;
font:bold 70% arial,sans-serif;
}
.menu li a:link,.menu li a:visited {
color:#000;
display:block;
background: #efeeee url(images/vnavbg.gif);
border-bottom:1px solid #e3e3e3;
padding:8px 0 0 10px;
}
.menu li a:hover {
color:#7b7b7b;
background: #363c49 url(images/vnavbgover.gif);
padding:8px 0 0 10px;
}
.menu ul {
list-style:none;
margin:0;
padding:0;
}
Thats what i use, obviously you will have to edit it to fit your layout, but it make your code nicer instead of <div id="link"> for every link.
You use this code like...
CODE
<div class="menu">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#5" title="Link 5">Forums</a></li>
<li><a href="#2" title="Games">Games</a></li>
<li><a href="#3" title="Jokes">Jokes</a></li>
<li><a href="#4" title="Videos">Videos</a></li>
<li><a href="#5" title="Pictures">Pictures</a></li>
</ul>
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#5" title="Link 5">Forums</a></li>
<li><a href="#2" title="Games">Games</a></li>
<li><a href="#3" title="Jokes">Jokes</a></li>
<li><a href="#4" title="Videos">Videos</a></li>
<li><a href="#5" title="Pictures">Pictures</a></li>
</ul>
Also in your code you posted k.digennaro
CODE
#cont {
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
width:495px;
background:#ffffff;
color: #000;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
you can simplify it to
CODE
#cont {
width:495px;
background-color:#ffffff;
color: #000;
border: 1px solid #000000;
text-align:left;
}
width:495px;
background-color:#ffffff;
color: #000;
border: 1px solid #000000;
text-align:left;
}
Notice the border statement is all in one line and where you had background i changed it to background-color as thats all you were using. If you want the border only on the right use border-right: then the border code after it, you can also use border-left, border-top and border-bottom.
QUOTE(wozzym @ Aug 30 2008, 01:05 AM) 
its the whole new coding hes giving you. just use this instead of whatever code you have..
Have you even looked at my code? It's nothing like the one he gave me. It wouldn't work at all for mine.
k.diggennaro, it's still not helping me, because I'm still not able to get it all straight. If I don't position my sidebar absolutely, it throws itself below the Container div, even though, in the code, it's inside it. Even with that positioned aboslutely, I can only get 1 header and 1 content to work correctly, when I need two. I'm not able to figure out why it's not working properly.
If you want ill try and fix for you, but i can't now as it's 02:34am in the uk so im slightly tired.
Here's my suggestion, take the code that i listed above, and add banjos suggestions. Open it up in your browser and see what it looks like. It's not going to look like your template. But notice that it's the same layout out as your template. Go back and adjust the colors to the colors you actually want to use. Then the text. It might not look quite right still. Try to figure out what's different in your layout and the code. I would suggest doing it without any images at first. Then adding them after you have it all figured out.
You're download link is broken for your files. If you get that fixed and by tomorrow you haven't figured out how to do this I'd be happy to help you with your specific template.
The template I created is just really a learning/teaching tool to show how a 2 column webpage is designed.
Best regard,
Kevin DiGennaro
You're download link is broken for your files. If you get that fixed and by tomorrow you haven't figured out how to do this I'd be happy to help you with your specific template.
The template I created is just really a learning/teaching tool to show how a 2 column webpage is designed.
Best regard,
Kevin DiGennaro
Oops, I typed the download link wrong. It should work now. I'm going to try what Banjo said right now.
lmao, all these people trying to help and all you have to do is delete the </div> after your first content box and all works fine.
I've also indented all your code, it helps find errors like these. Always put closing tags on their own line, indented the same amount of times as the opening tag, thats how I found your error, I noticed two closing div tags when I started indenting.
I've also made your code valid. All image tags require the alt attribute. Even if it's blank, but you should fill the alt tags in with something.
Also, in css when you assign a tag an id ( like <div id="blah">) you are only allowed to use that ONCE. To use it multiple times, you give the tag a class (like <div class="blah">) and in the css document you define the class like this: .blah { } (notice the only difference is # is replaced with a period. .
There ya go.
And k.digennaro why did you need his zip file? I just went to the link he provided and saved the source and the images to test on my computer.
Also to the OP I think you should follow some of the other peoples advice in this thread. Your code is extremely messy, and could get quite out of hand when you start adding real content to the layout.
I've also indented all your code, it helps find errors like these. Always put closing tags on their own line, indented the same amount of times as the opening tag, thats how I found your error, I noticed two closing div tags when I started indenting.
I've also made your code valid. All image tags require the alt attribute. Even if it's blank, but you should fill the alt tags in with something.
Also, in css when you assign a tag an id ( like <div id="blah">) you are only allowed to use that ONCE. To use it multiple times, you give the tag a class (like <div class="blah">) and in the css document you define the class like this: .blah { } (notice the only difference is # is replaced with a period. .
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Bleu Dust</title>
</head>
<body>
<div id="container">
<div id="banner">
<img src="banner.png" alt="" />
</div>
<div class="header">
<img src="header.png" alt="" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.
</div>
<div class="header">
<img src="header.png" alt="" />
</div>
<div class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.
</div>
<div id="sidebar">
<div id="links">
<div id="linksheader">
<img src="links.png" alt="" />
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
</div>
<div id="affiliates">
<div id="affiliateheader">
<img src="affiliates.png" alt="" />
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
</div>
<div id="advert">
<div id="advertheader">
<img src="advert.png" alt="" />
</div>
<div id="advert1">
</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Bleu Dust</title>
</head>
<body>
<div id="container">
<div id="banner">
<img src="banner.png" alt="" />
</div>
<div class="header">
<img src="header.png" alt="" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.
</div>
<div class="header">
<img src="header.png" alt="" />
</div>
<div class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque luctus, turpis vitae facilisis blandit, nisl tellus malesuada risus, ut fringilla nunc sapien et diam. Pellentesque tellus dui, pellentesque eget, semper ut, eleifend a, erat. Integer velit. Vivamus sodales orci eget leo tincidunt facilisis. Donec augue nisl, imperdiet vel, pulvinar pulvinar, elementum sed, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque est. Ut semper fermentum pede. Sed nulla. Morbi vehicula suscipit lectus. Morbi et erat. Nulla vitae turpis. Vestibulum mauris arcu, scelerisque sit amet, consequat ut, luctus et, risus. Aenean tincidunt luctus nunc. Praesent blandit.
</div>
<div id="sidebar">
<div id="links">
<div id="linksheader">
<img src="links.png" alt="" />
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
</div>
<div id="affiliates">
<div id="affiliateheader">
<img src="affiliates.png" alt="" />
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
<div class="link">
Link
</div>
</div>
<div id="advert">
<div id="advertheader">
<img src="advert.png" alt="" />
</div>
<div id="advert1">
</div>
</div>
</div>
</div>
</body>
</html>
There ya go.
And k.digennaro why did you need his zip file? I just went to the link he provided and saved the source and the images to test on my computer.
Also to the OP I think you should follow some of the other peoples advice in this thread. Your code is extremely messy, and could get quite out of hand when you start adding real content to the layout.
nice one andrew.. i just came but problem solved..
i just came but problem solved..
I'm on the html/css ball so to speak! 
Ooh, thanks Trippin ^^
No Problem! Glad I could help.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.