Page Layout Problems

V

vampyrus

New Member
Okay ..... This is one of the pages that I am having problems with:
http://vampyrus.8tt.org/RPG.htm

I want the page to look just like that except that the header needs to become 3 seperate images with the canines pic in the middle and the two border images on the outsides. Footer needs to be the same.

When I modify it I get a page that looks like this:
http://vampyrus.8tt.org/RPG2.htm

Here is the code for the first page:

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

body,td,th {
	font-family: Final Frontier;
	color: #FFFFFF;
}

#container {
	position: relative;
	margin: 20px;
	left: 0px;
		    	}

#header {
    position: relative;
    top: 0px;
    bottom: 120px;	
	}

#footer {
   	position: relative;
	margin-top: 42%;
	bottom: 0px;
	left: 0px;
	clear: both;
	}


.column { float: left; width: 33%; }

.photo { float: right; width: 33%; }

.style1 {color: #FFFFFF}
.style4 {color: #33FFFF}
.style8 {color: #ff3300}
.style9 {font-size: 24px}
.style12 {color: #ffff66}
.style13 {color: #99ccff}
.style14 {font-size: 20px}
.style15 {color: #ff9933}

a:link {color: #FFFFFF; text-decoration: underline; }
a:visited{color: #33FFFF; text-decoration: underline; }
a:hover{color: #9999ff; text-decoration: none; }

HTML:
HTML: 
<!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="borders.css"/>

</head>
<body background="stars.jpg">
<div id="header"><a name="Top"></a>
  <a href="index.htm"><img src="header2.gif" alt="Return to the home of Vampyrus" border="0"  /></a></div>


<Div id="container">
<center>
<div class="column"> <a href="http://www.star-fleet.com/" target="_blank"><img src="stfrpg.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="species.htm" target="_self"><img src="species.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="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></div>
<div class="column"> <a href="kestalia.htm" target="_self"><img src="Kestalia.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="shadrach.htm" target="_self"><img src="shad.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="jolen.htm" target="_self"><img src="jolen.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="mailto:[email protected]"><img src="email.gif" border="0" /></a></div>
<div class="column"> <a href="http://www.star-fleet.com/stf4/asimov/" target="_blank"><img src="asimov.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="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>
</center>
</Div>
<div id="footer">
       <p><a href="#Top">
        <img border="0" alt="Top of Page" src="footer2.gif" /></a></p> </div>
</body>
</html>


And here is the code for the new modified page:
CSS:
Code: 
html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url(STARS.JPG);
	}

body,td,th {
	font-family: Final Frontier;
	color: #FFFFFF;
}

#container {
	position: relative;
	margin: 20px;
	left: 0px;
		    	}

#header {
    position: relative;
    top: 0px;
    bottom: 120px;	
	}

#footer {
   	position: relative;
	margin-top: 42%;
	bottom: 0px;
	left: 0px;
	clear: both;
	}


.column { float: left; width: 33%; }

.photo { float: right; width: 33%; }

.style1 {color: #FFFFFF}
.style4 {color: #33FFFF}
.style8 {color: #ff3300}
.style9 {font-size: 24px}
.style12 {color: #ffff66}
.style13 {color: #99ccff}
.style14 {font-size: 20px}
.style15 {color: #ff9933}
.one { position: relative; top: -132px; float: left; }
.two { }
.three { position: relative; top: -132px; float: right; }

a:link {color: #FFFFFF; text-decoration: underline; }
a:visited{color: #33FFFF; text-decoration: underline; }
a:hover{color: #9999ff; text-decoration: none; }

and HTML:
HTML: 
<!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="borders.css"/>

</head>
<body background="stars.jpg">
<div id="header"><a name="Top"></a>
<div class="two"><img src="vampyrusfrostysize75.gif" width="353" height="132"></div>
<div class="one"><a href="index.htm"><img src="Header_left.gif"  alt="Return to the home of Vampyrus" border="0"  width="303" height="36"></a></div>
<div class="three"><img src="Header_right.gif" width="303" height="36"></div>
</div>

<Div id="container">
<center>
<div class="column"> <a href="http://www.star-fleet.com/" target="_blank"><img src="stfrpg.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="species.htm" target="_self"><img src="species.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="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></div>
<div class="column"> <a href="kestalia.htm" target="_self"><img src="Kestalia.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="shadrach.htm" target="_self"><img src="shad.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="jolen.htm" target="_self"><img src="jolen.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="mailto:[email protected]"><img src="email.gif" border="0" /></a></div>
<div class="column"> <a href="http://www.star-fleet.com/stf4/asimov/" target="_blank"><img src="asimov.gif" border="0" /></a><br />
  <br /><br /> 
  <a href="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>
</center>
</Div>
<div id="footer">
       <p><a href="#Top">
        <img border="0" alt="Top of Page" src="footer2.gif" /></a></p> </div>
</body>
</html>
 
jnjc

jnjc

New Member
Try this:

Changes to .css:

Code: 
#header {
    position: relative;
    top: 0px;
    height:132px;
	}

HTML:
Code: 
<div id="header"><a name="Top"></a>
<img  src=Header_left.gif"  alt="Return to the home of Vampyrus" border="0"  width="303" align="left" >
<img  src="vampyrusfrostysize75.gif" width="353" height="132" align="left">
<img  src=Header_right.gif" width="303" height="36">
</div>


You will probable have to change the padding on the left and right images to get it exactly right but it should get you started.

HTH,
JC
 
V

vampyrus

New Member
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.
 
Last edited:
You must log in or register to reply here.
Top