Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

unwanted space in layout

Started by Chris., Jan 29 2008 08:29 PM

You cannot reply to this topic
Go to first unread post

3 replies to this topic

#1 Chris.

Young Padawan

Members
129 posts

Gender:Male

Posted 29 January 2008 - 08:29 PM

Well, I took a different approach in coding this layout, as I wanted the header and footer to adjust to the user's screen resolution, but I wanted the content areas to stay the same size, so I used FireThrottle's CSS as a reference, but I am still having some trouble. Can someone help me? There is some unwanted space. If you look at the below image, you can see where I typed "This space right here along where this text is" in the space that I don't want. It is below the header and navigation bar, but above the content area's. here is the screen shot, and my css.

Posted Image

if you would like to view the CSS with syntax highlighting, then here is a pastebin link: http://pastebin.com/m351365c9

/*------GLOBALS------*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #282828;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
}
img {
		border: 0px none;
}
/*------CONTAINERS------*/
#headUnit {
	width: 100%;
	margin: 0px auto;
	text-align: center;
	height: 108px;
}
#headContainter {
	text-align: center;
	margin: 0px auto;
	width: 100%;
	height: 66px;
	background-image: url(images/header_bg.png);
	background-repeat: repeat-x;
}
#navContainer {
	text-align: center;
	margin: 0px auto;
	width: 100%;
	height: 32px;
	background-image: url(images/nav_bg.png);
	background-repeat: repeat-x;
}
#mainContainer {
	color: #CCCCCC;
	margin: 0px auto;
	width: 800px;
	height: 100%;
	text-align: left;
}
#footerContainer {
	width: 100%;
	clear: both;
}
/*------CONTENT------*/
#sideBar {
	background-color: #3d3d3d;
	margin: 0px;
	width: 175px;
	height: 100%;
	float: right;
}
#mainContent {
	background-color: #333333;
	margin: 0px;
	width: 625px;
	height: 100%;
	float: left;
}
/*------FOOTER------*/
#footer {
	background: url(images/footer_bg.png);
	margin: 0 auto;
	width: 100%;
	height: 50px;
	clear: both;
	vertical-align: middle;
	font-size: 11px;
}
#footer a:link, a:visited, a:active {
	text-decoration: none;
	color: #000000;
	font-size: 11px;
}
#footer a:hover {
	text-decoration: underline;
	color: #000000;
	font-size: 11px;
}

Here is the XHTML also

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris Rogers :: Personal Blog &amp; Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="headUnit">
	<div id="headContainter">	
		<div style="margin-left: 10%; border-style: none;"><a href="#"><img src="images/logo.png" alt="Chris Rogers :: Personal Blog &amp; Tutorials" /></a></div>
	  </div>
	<div id="navContainer">
		<ul id="navigation">
			<li><a href="#">Home</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Link to Us</a></li>
			<li><a href="#">Affiliates</a></li>
		</ul>
	</div>
</div>
<div id="leftBar"></div>
<div id="mainContainer">
	<div id="mainContent">Main content
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />	
	</div>
	<div id="sideBar">Side bar
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>
</div>
<div id="rightBar"></div>
<div id="footerContainer">
	<div id="footer">
		Blah Blah Blah
	</div>
</div>
</body>
</html>

All of the line breaks are for making space in the content area's so I can get a better idea of what the finished layout will look like.

PS: I will probably be updating this topic periodically, instead of creating another one, with errors in my code and stuff, so please check back often. Thanks!

Edited by .Cyclone, 30 January 2008 - 06:43 PM.