Page layout and coding issues

vampyr07au · 07-14-2008, 07:32 AM

I have created a page and I wanted to make some changes to the way it looks.

CSS code:

Code:

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
    background-image: url(STARS.JPG);	
	border: solid 10px #000000;	
				}

body,td,th {
	font-family: Comic Sans MS;
	color: #9933CC;
}

#header {
    top: 0px;
	text-align:center;
	width: 100%;
	}

#leftcol {
  position: relative;
  top: 100px;
  left: 0px;
  width: 150px;
  height: 500px;
 }
 
#rightcol {
  position: relative;
  left: 650px;
  top: 100px;
  width: 150px;
  height: 500px;
}

#content {
  position: relative;
  top: 100px;
left: 150px;
  width: 500px;
  height: 500px;

#footer {
   	position: absolute
	bottom: 0px;
	left: 0px;
	clear: both;
	}



.style1 { color: #9933ff; text-align: center; }
.style2 {    font-size: 18px; color: #990099; }
.one { position: relative; top: -132px; float: left; }
.two { }
.three { position: relative; top: -132px; float: right; }
.four { position: relative; bottom: -132px; float: left; }
.five { }
.six { position: relative; bottom: -132px; float: right; }

a:link {color: #FF0000; text-decoration: underline; }
a:visited{color: #CC0000; text-decoration: underline; }
a:hover{color: #9999ff; text-decoration: none; }

HTML Page code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>


<link rel="stylesheet" type="text/css" href="website2.css"></head><body background="stars.htm">
<!-- Begin Free Hosting Code Insert -->
<script type="text/javascript" src="insert.htm"></script>
<!-- End Free Hosting Code Insert -->

<div id="header"><a name="Top"></a>
<div class="one"><img src="Header_left.gif" width="303" height="36"></div>
<div class="two"> <a href="http://vampyr07au.987mb.com/RPG.htm"></a> <img src="returntotrekstuff.gif" width="192" height="114"></div>
<div class="three"><img src="Header_right.gif" width="303" height="36"></div>
</div>


<div id="leftcol">
<br>
  <br><br>
  <a href="http://vampyr07au.987mb.com/species.htm" target="_self"><img src="species.gif" border="0"></a><br>
  <br><br> 
  <a href="http://vampyr07au.987mb.com/templates.htm" target="_self"><img src="templates.gif" border="0"></a><br>
  <br><br> 
  <a href="http://www.shipschematics.net/startrek/" target="_blank"><img src="starships.gif" border="0"></a><br>
  <br><br>
  <a href="http://www.star-fleet.com/" target="_blank"><img src="STFRPG.gif" border="0"></a>
  </div>
<div id="content" align="center"><br>
  <br><br> 
  <a href="http://vampyr07au.987mb.com/shadrach.htm" target="_self"><img src="shad.gif" border="0"></a><br>
  <br><br> 
  <a href="http://vampyr07au.987mb.com/Jolen.htm" target="_self"><img src="jolen.gif" border="0"></a><br>
  <br><br> 
  <a href="http://vampyr07au.987mb.com/kestalia.htm" target="_self"><img src="kestalia.gif" border="0"></a><br>
  <br><br>
  <a href="mailto:vampy.stf@gmail.com"><img src="email.gif" border="0"></a></div>
  
<div id="rightcol"> <a href="http://www.star-fleet.com/stf4/asimov/" target="_blank"><img src="asimov.gif" border="0"></a><br>
  <br><br> 
  <a href="http://vampyr07au.987mb.com/redalert.htm" target="_blank"><img src="atlantis.gif" border="0"></a><br>
  <br><br> 
  <a href="http://www.star-fleet.com/stf7/genesis/" target="_blank"><img src="genesis.gif" border="0"></a><br>
  <br><br> 
  <a href="http://www.startrek.com/" target="_blank"><img src="startrekDOTcom.gif" border="0"></a></div>

<div id="footer">
<div class="four"><img src="Footer_left.gif" width="303" height="36"></div>
<div class="five"><img src="Top.gif" width="170" height="34"></div>
<div class="six"><img src="Footer_right.gif" width="303" height="36"></div>
</p>
</div>
</body></html>

Here's a link to the page in question so you can see how it looks currently.
http://vampyr07au.987mb.com/RPG.htm

What it's meant to look like:
The header and footer should have the border edgings in the correct places with the header having the picture in the middle.
The footer also includes a "back to top" button which I will add later.

The 3 columns of buttons that are links should all be on one level on the page with the middle column being centred and the left and right ones being equal distances from both the central column and also their respective page edges.

Hope that all made sense and really appreciate any help as I cannot figure out where I have gone wrong.

Before I started playing around with it I had a page that looked okay but the three columns were not evenly spaced on the page.