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: 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; } Code (markup): 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: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> HTML: And here is the code for the new modified page: CSS: 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; } Code (markup): and 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: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> HTML:
what is your point? the #1 page are correct in it location. so if you make another page/link just make copy from it and change the content. the structure layout will not change
In the first page ie RPG.htm that is linked ..... the header is one single image that is of a fixed length and when its viewed on a wide screen display the container text sits outside the edges that are defines by the header and footer images ..... I wanted to change it so that the header and footer are 3 images each that will sit aty the edges of the page no matter what resolution it is viewed on.