![]() |
![]() |
![]() |
|||||
![]() |
![]() |
![]() |
![]() |
![]() |
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
![]() |
|
|
Thread Tools |
|
|
#1 (permalink) |
|
Registered User
Join Date: Nov 2007
Posts: 6
OS: Xp pro
|
Page layout and coding issues
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 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> 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. |
|
|
|
![]() |
| Thread Tools | |
|
|