need help with css

Cody · #1 (**permalink**) 10-08-2008, 08:23 PM

hey ive been learning CSS and attempting to make a website using html and css so far its been going pretty good but ive hit a snag.....
Ill try to explain as good as possible.

here is my code so far (no images just code so far)

html code:

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" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="containter">
<div class="banner">Banner
</div>
<div class="nav">
  <div align="center">Nav</div>
</div>
<div class="sidebar"></div>
<div class="sidebar">
  <div align="center">SideBar</div>
</div>
</div>
<div class="content">Content</div>
</body>
</html>

And here is the CSS part of my website:

Code:

@charset "utf-8";
/* CSS Document */

html, body {
	background-color: #2B2E2F;
	margin-left: 0 auto;
	margin-right: 0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.banner {
	border: 1px solid orange;
	width:1000px;
	height:100px; 
	position:absolute;
	top:15px; 
	left:50%;
	margin-left:-500px; 
}

.nav {
	border:1px solid orange;
	width:825px;
	height:35px;
	position:absolute;
	top:124px;
	left:584px;
	margin-left:-400px;
	width: 828px;
}

.containter {
	background-color:#FFFFFF;
	width:1020px;
	height:600px;
	position:absolute;
	left:839px;
	margin-left:-510px;
}

.sidebar {
	border:1px solid orange;
	width:160px;
	height:300px;
	position:absolute;
	top:124px;
	left:87px;
	margin-left:-75px;
}

.content {
	border:1px solid orange;
	width:826px;
	height:200px;
	position:absolute;
	top:181px;
	left:763px;
	margin-left:-250px;
	
}

Ok I will explain my problem.

If you read the code you will see

Code:

.content

well this is where my website's content goes in ( pretty obvious) but I want to add a footer (I want the footer to be called

Code:

.footer

) And I want the footer to move if the border of

Code:

.content

gets bigger.

I hope I explained it well enough, please help!

Cheers
Cody

Nora · #2 (**permalink**) 10-08-2008, 09:51 PM

It would help if you could show a live version of the site.

I noticed you have a double sidebar, that might cause some trouble.
Instead of using: <div align="center">Nav</div>, it's better to set:
.nav {
text-align: center;
}

To add a footer just add <div class="footer"></div> to your html and use the following CSS:
.footer {
clear: both;
}
Assuming you want the footer to be placed under your content..

Cody · #3 (**permalink**) 10-08-2008, 10:08 PM

Quote:

Originally Posted by Nora

It would help if you could show a live version of the site.

I noticed you have a double sidebar, that might cause some trouble.
Instead of using: <div align="center">Nav</div>, it's better to set:
.nav {
text-align: center;
}

To add a footer just add <div class="footer"></div> to your html and use the following CSS:
.footer {
clear: both;
}
Assuming you want the footer to be placed under your content..

Ok ill test it out thankx heaps!, thank also i didnt notice the double side bar :P

Cody · #4 (**permalink**) 10-08-2008, 10:20 PM

I added it but it didnt work? it was up the top, instead of down the bottom where I want it.

Cheers
Cody

Cotton · #5 (**permalink**) 10-08-2008, 10:38 PM

The reason why your footer is placed at the top is because all of your elements are positioned absolutely, which takes them out of the normal flow of your website. Normally, you wouldn't want to absolutely position everything like that. As much as I hate to say it, you should probably go back and revisit your CSS. When starting out with CSS it can be easy to rely on absolute positioning too much, but it often means a lot of problems.

Cody · #6 (**permalink**) 10-08-2008, 10:47 PM

Quote:

Originally Posted by Cotton

The reason why your footer is placed at the top is because all of your elements are positioned absolutely, which takes them out of the normal flow of your website. Normally, you wouldn't want to absolutely position everything like that. As much as I hate to say it, you should probably go back and revisit your CSS. When starting out with CSS it can be easy to rely on absolute positioning too much, but it often means a lot of problems.

first welcome to websitebabble.com

secondly could you explain what I use instead of position:absolute?

cheers
cody

WB Sponsors