Website assignment; help.

[Robert Allen]

Hi,

I am doing a website assignment at college, and i cannot get my layout to work, and i cannot work out why. It has been about 6 years since i last made my proper website. Can somebody give me some pointers on what i am doing wrong? Cheers.

body {
	margin-top: 20px;
	background: url(images/header.gif) top no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6D6D6D;
	margin-left:-4px;
	margin-right:4px;
}

h2, h3 {
	margin: 0;
	font-weight: normal;
	color: #f7757b;
}

h1 {
	letter-spacing: -1px;
	font-size: 40px;
	margin: 0;
	margin-top: -3px;
	font-weight: normal;
	color: black;
}

h2 {
	font-size: 26px;
	color: #f7757b;
}

p, ul, ol {
	margin: 0 0 2em 0;
	text-align: justify;
	line-height: 20px;
}

a:link {
	color: #0094E0;
}

a:hover, a:active {
	text-decoration: none;
	color: #0094E0;
}

a:visited {
	color: #0094E0;
}

/* Header */

#header {
	width: 890px;
	height: 130px;
	margin: 0 auto 0px auto;
	padding-top: 0px;
}

#logo {
	float: left;
	height: 90px;
	
}

#logo h1 {
	margin: 0;
	padding: 5px 0 0 5px;
	font-size: 40px;
	color: #ffffff;
}

#logo h1 sup {
	vertical-align: text-top;
	font-size: 24px;
}

#logo h1 a {
	color: #ffffff;
}

#logo h2 {
	margin: 0;
	padding: 0 0 0 5px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #e1f1ff;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Menu */

#menu {
	float: right;
	padding-top: 30px;
}

#menu ul {
	margin: 2px;
	padding: 11px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin-left: 1px;
	padding: 1px 5px;
	text-decoration: none;
	font-size: 16px;
	color: #FFFFFF;
}


#menu .active a {
	color: #999999;
}

/* Page */

#page {
	width: 900px;
	margin: 0 auto;

}

/* Content */

#content {
	float: left;
	width: 799px;
	padding: 30px 0 0 30px;
	background: #FFFFFF;
}

#contentleft {
	float: left;
	width: 780px;
	padding: 30px 0 0 30px;
	background: #FFFFFF;
}

/*Contentlefty is specifically for the about page, to allow the picture of the surfboard not be overwritten by text on the page */

#contentlefty {
	float: left;
	width: 200px;
	padding: 30px 0 0 30px;
	background: #FFFFFF;
}

#contentmiddle {
	float: center;
	width: 400px;
	padding: 30px 0 0 30px;
	background: #FFFFFF;
}

#contentr2 {

	float: right;
	width: 200px;
	padding: 40px 0 0 30px;
	background: #FFFFFF;
}

/* Content right is not used and is rendered obsolete for now */

#contentright {
	float: right;
	width: 200px;
	background: url(images/right.gif) repeat;
	padding: 20px -50px 30px 0px;
}



/* Footer */

#footer {
	width: 901px;
	background: url(images/content_back_bottom.jpg) top no-repeat;
	margin: 0 auto;
	height: 100px;
	padding: 10px 0 0 0px;
	color: #353535;
}


#notice {
	clear: both;
	font-size: 11px;
	color: #6D6D6D;
	padding-left: 190px;
}

<!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" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Surfing and Clothing Southwest Ltd - Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<!-- Created by Robert Allen. Index page of the surfing and clothing website -->

<body>
<!-- start header -->
<div id="header">
	<div id="logo">
		<h1><a href="Index.html"><img src="images/logo.jpg" alt="Surfing and Clothing logo" /><sup></sup></a></h1>
		<h2></h2>
	</div>
<div id="menu">
	<div id="space">
		Tel: 01872 768527<br />
		E: [email protected]</div>
		<ul>
			<li class="active"><a href="index.html">HOME   |</a></li>
			<li><a href="about.html"> ABOUT   |</a></li>
			<li><a href="index.html"> WEBSTORE   |</a></li>
			<li><a href="contact.html"> CONTACT US   </a></li>
		</ul>

</div>
	
</div>
<!-- end header -->

<!-- start page -->
<div id="page">
	<!-- start content -->

	<div id="contentlefty">
	
	<div class="post">
	<div class="entry">
	
	
	<p>content left</p>
	
	</div>
	</div>
	</div>
	
	<div id="contentmiddle">
		<div class="post">

			<div class="entry">
				<h1>Welcome to Surfing and Clothing Southwest </h1>

				<h4>We believe the key to good surfing is a good reliable company to provide good quality services and surfing equipment at a fair price</h4>
				<p>
					<ol>
						<li>Good Training</li>
						<li>Good Clothing</li>
						<li>Excellent Customer Service</li>
						<li>Great Equipment Hire</li> 
					</ol>
				</p>


			<br /><br />

			<h1><center>Fixed rate training</center></h1>

			<p><center>We offer a range of training for all skill levels. </center></p>


			</div>
		</div>
	</div>

	<div id="contentr2">
	<div class="post">
	<div class="entry">
	<p>Content right</p>
	</div>
	</div>
	</div>
	
</div>
	<!-- end content -->



<div style="clear: both;"> </div>

<!-- end page -->


<!-- start footer -->
<div id="footer">
		<p id="notice">

Copyright © 2012 Surfing and Clothing Southwest Ltd. 
<br />
		</p>

</div>

<!-- end footer -->
</body>
</html>

The code looks correct on both the webpage and the cascading style sheet, but the contentleft/middle/r2 all just land on top of each, and it really isn't pretty.

Thanks in advanced for any help :D

 

[Robert Allen]

Anyone?

 

[enlytend]

I'm not going to do your assignment for you, but you need to review how to use the float property.

For example, this:

float: center;

wrong.

 

[doonkerhosting]

yeah float

 

[r0ya1]

Hi Robert,

In your Css, change your "float: center;" to "margin: 0 auto;" or "margin-left = (width of content left)px"
In your Html, put the content right div before the content middle div.

That should fix a few things - I don't see the full layout so no idea what else is broken. By the way, I suggest you keep your alignment more consistent; it will be useful when "debugging".

Regards,
R0ya1