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: Select all
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: Select all
<!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:vampy.stf@gmail.com"><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: Select all
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: Select all
<!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:vampy.stf@gmail.com"><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>
Page Layout Problems
Jul 16th, 2008, 05:12
Similar Threads
