Help with CSS footers and background

james_51 · #1 (**permalink**) 02-04-05, 11:47 PM

Hi,
I'm new to CSS, and i'm having a problem I can't solve. Here's my site: http://www.bayareabmx.com/main.php .

The problems:
1. The space after the main header and the navigation/welcome/tagboard div's should be #333333, not black.

2. the footer (Copyright (C) 2002-2005 BayAreaBMX.com) should be on the bottom of the page.

Please help.

html source:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BayAreaBMX Riding Scene - v3.0 BETA</title>
<link rel="StyleSheet" href="style/styleNN.css" type="text/css" />
<style type="text/css">
@import url("style/styleNN.css");
</style>
</head>
<body>

<div class="head">
	<!-- Begin Header -->
	<img src="images/top_banner.jpg" width="770" alt="BayAreaBMX.com" />
	&nbsp;&nbsp;&nbsp;| <span class="white"><a href="contact.php">CONTACT US</a></span> |  <span class="white"><a href="webspace.php">BUY WEB SPACE</a></span> |
	<!-- Begin Nav menu -->

		<div class="leftcolumnhead">
			<img src="images/nav.jpg" width="75" height="16" alt="Navigation" />
											<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="main.php">Home</a></div>
								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="archives.php">Archives</a></div>
								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="pictures.php">Pictures</a></div>
								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="videos.php">Videos</a></div>
								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="products.php">Products</a></div>

								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="other.php">Other</a></div>
								<div class="links"><img src="images/arrow.gif" width="5" height="5" alt="*" /><a href="links.php">Links</a></div>
		
		
		<div class="leftcolumnhead">
			<img src="images/search.jpg" width="75" height="16" alt="Recent" />
		</div>
		<div class="newstitle">&nbsp;&nbsp;&nbsp;News
										<div class="leftnews">1-29-2005</div>
							<div class="leftnews">John Urban owes james webspace on teamlimit.</div>

								<div class="leftnews">01-22-2005</div>
							<div class="leftnews">New BayAreaBMX Layout for the year 2005!! Even though it's kinda late- we're not perfect. This is Version 3.0 Design by John Urban. We don't update much-we know, we're starting to get our act together and will soon post more pictures and videos as well. On the new design we cut out all the junk no one looked at, or didn't care about, and kep the only things that are important -- archives, pictures, and video. That is our new goal - for the pictures and video. If you couldn't already tell, we upgraded our web server from Window's Web Edition **** quality to new and improved Linux Debian 3.0. So your downloads will be much faster and well as page loads. I hope you like the new design - hopefully there will be updates in the near future.</div>
	
		</div>
		</div>
		<!-- Begin content -->
		<div class="mainhead">
			<img src="images/welcome.jpg" width="75" height="16" alt="Welcome" />
			<div class="main"><center><img src="bab/recent/back.jpg" alt="We're Back!" /></center>

<br />
<br />
<br />
<span class="black">Summary of photos in order from left to right:</span>
<br />
<b>(1)</b> Amir double pegs slanted walls. 
<b>(2)</b> Stevie is the new hero in town. 
<b>(3)</b> Squeekster .
<b>(4)</b> Josh rides walls that are 2 feet tall.

<b>(5)</b> The Gonz with the x-up out of the slanted wall.
<b>(6)</b> THE MAN busting the GONZ.
<b>(7)</b> Ice pick by Jason in a huge water drainage ditch.
<b>(8)</b> Them cap's don't do much -- suqeeks smiths above the "skate-stoppers"
<br />
<br />
<br />
<a target="_blank" href="bab/recent/amir_doublepeg_ATT.jpg"><img border="0" src="bab/recent/amir_doublepeg_ATT_small.jpg" width="125" height="83" alt="1" /></a>
<a target="_parent" href="bab/recent/DSC_0024_edit.jpg">

<img border="0" src="bab/recent/DSC_0024_edit_small.jpg" width="125" height="83" alt="2" /></a>
<a target="_blank" href="bab/recent/DSC_0025_re.jpg">
<img border="0" src="bab/recent/DSC_0025_re_small.jpg" width="125" height="83" alt="3" /></a>
 <a target="_blank" href="bab/recent/DSC_0099_rebig.jpg">
<img border="0" src="bab/recent/DSC_0099_rebig_small.jpg" width="125" height="79" alt="4" /></a>
<a target="_blank" href="bab/recent/IMG_9911_re.jpg">
<img border="0" src="bab/recent/IMG_9911_re_small.jpg" width="125" height="83" alt="5" /></a>
<a target="_blank" href="bab/recent/sean_cop.jpg">
<img border="0" src="bab/recent/sean_cop_small.jpg" width="125" height="83" alt="6" /></a>
 <a target="_blank" href="bab/recent/jason_icepic1.jpg">
<img border="0" src="bab/recent/jason_icepic1_small.jpg" width="125" height="186" alt="7" /></a>
<a target="_blank" href="bab/recent/squeeks_smith_bench.jpg">
<img border="0" src="bab/recent/squeeks_smith_bench_small.jpg" width="125" height="187" alt="8" /></a></div>

		</div>

	<div class="rightcolumnhead">
		<img src="images/links.jpg" height="16" alt="Tag-board" />
		<div class="tagboard"><iframe src="http://www.bayareabmx.com/tagboard/pabox.php" width="170" height="650" frameborder="0"></iframe></div>
	</div>
	<div class="footer">Copyright (C) 2002-2005 BayAreaBMX.com &nbsp;<strong>.</strong>&nbsp; Since November 4th, 2002</div>
</div>
</body>
</html>

CSS source:

Code:

BODY {
font-family: 	Tahoma, Verdana, sans-serif;
font-size: 	11px;
font-weight: 	normal;
color: 		#FFFFFF;
background-color: #000000;
}

.head {
width:		770px;
color:		#FFFFFF;
margin-right:	auto;
margin-left:	auto;
margin-top:	10px;
padding:	0px;
text-align:	left;
background-color: #333333;
}

.leftcolumnhead {
width:          175px;
margin-top:	5px;
padding:	0px;
float:		left;
background-color: #666666;
}


.mainhead {
width:		420px;
padding:	0px;
margin-top:	5px;
float:		left;
background-color: #E6E7D7;

}

.rightcolumnhead {
width:          175px;
padding:	0px;
margin-top:	5px;
float:		left;
background-color: #A5A59D;
}

.links {
width:		175px;
height:		20px;
background-color: #A5A59D;
}

.newstitle {
width:		175px;
background-color: #A5A59D;
font-weight:	bold;
font-size:	12px;
}

.leftnews {
width:		175px;
margin-top:	10px;
font-size:	11px;
font-weight:	normal;
background-color: #A5A59D;
height:		100%;

}

.main {
width:		420px;
background-color: #FFFFFF;
font-family: 	Tahoma, Verdana, sans-serif;
font-size: 	11px;
text-align:	left;
color:		#000000;
}

.tagboard {
width:		175px;
background-color: #666666;
height:		100%;
}

.footer {
bottom:		10px;
width:		770px;
background-color: #333333;
text-align:	center;
vertical-align:	text-bottom;
margin-right:	auto;
margin-left:	auto;
}

A {
color: 		#FFFFFF;
font-size: 	11px;
text-decoration: underline;
background-color:transparent;
}
A:hover, A:active {
color: 		#FFFFFF;
}

Thanks!!!