CSS Forum

**vampyrus** · 07-15-2008, 08:39 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">

<script type="text/javascript" src="insert.htm"></script>


<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.

**LadynRed** · 07-15-2008, 11:18 AM

It is completely unnecessary to use all that positioning. Learn to use the normal document flow to your advantage. Then learn to use floats for your columns and that 'stacking' problem will go away.

You're missing the closing </head> tag - that's a serious error.
Learn to use unordered lists for, well.. lists - like your navigation.

**joder** · 07-15-2008, 11:37 PM

Ever heard of the <p> tag?

**vampyrus** · 07-16-2008, 05:13 AM

Okay thanks for the replies ..... In response to lady I have a problem with the use of the list for the navigation buttons as it adds either bullet points or numbers/letters to my page next to each button and I don't want that.
I am still working on the float part of your reply.

**joder** · 07-16-2008, 10:38 AM

Quote:

Originally Posted by vampyrus

I have a problem with the use of the list for the navigation buttons as it adds either bullet points or numbers/letters to my page next to each button and I don't want that.

You can put in the CSS for li

Code:

li {
    list-style-type: none;
}

http://www.w3schools.com/CSS/pr_list-style-type.asp

**vampyrus** · 07-16-2008, 03:10 PM

Thanks for that joder.

Okay .... almost have it working now after researching and playing most of the day.

just hav a slight problem now

this page works fine:
http://vampyrus.8tt.org/test%20site/templates.htm

as does this one:
http://vampyrus.8tt.org/test%20site/kestalia.htm

but in this one:
http://vampyrus.8tt.org/test%20site/RPG.htm
the footer seems to want to make the page height stretch even though the content should leave the page at normal window size .....

Code:

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

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

#container
{
width: 90%;
margin: 10px auto;
border: 0px;
line-height: 130%;
min-height:100%;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
margin-right: 200px;
padding: 1em;
}

#container2
{
width: 100%;
margin: 10px auto;
border: 0px;
line-height: 130%;
min-height:100%;
}

#footer
{
clear: both;
position: relative;
height: 40px;
}


.photo { float: right; width: 33%; }
.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; }

any got any ideas??
cos i'm all out.