- Impact
- 35
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.
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
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.
Code:
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;
}
Code:
<!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
