dirt lover Posted January 19, 2007 Share Posted January 19, 2007 What is emphasized in the css is all I added. Before I added it, everything was centered.the page:http://www.freewebs.com/pbmedia/indexJMD2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="en"><head><title>Index<< PB Media</title><content="text/html;charset=ISO-8859-1">"><link href="theStylesJMD2.css" type="text/css" rel="stylesheet"></head><body id="body"> <table ID="Table1" align="center"> <!-- start header --><TR align="center"><TD><h1 id="header-title">Patrick Branch Media</h1></TD></TR> <TR align="center"><TD>[color="#3333FF"]<img id="header" src="i-filmheader.gif" alt="i-filmheader.gif"></TD>[/color][u][b]</TR> <!-- end header --> <!-- start buttons --><TR align="center"> <!-- start buttons --><TR align="center"> <TD><table id="buttons_table"; align="center"> <tr> <td class="buttons_td" > <a class="buttons_a"; href="index.html">Index</a> </td> <td class="buttons_td"> <a class="buttons_a"; href="pb.html">Patrick Branch</a> </td> <td class="buttons_td"> <a class="buttons_a"; href="p.html">Photography</a> </td> <td class="buttons_td"> <a class="buttons_a"; href="gd.html">Graphic Design</a> </td> <td class="buttons_td"> <a class="buttons_a"; href="ci.html">Contact Info</a> </td> </tr> </table></TR></TD> <!-- end buttons--> <!-- Start Main Content --><TR align="center"><TD><img id="main-content" alt="i-painting2.jpg" src="i-painting2.jpg"></TR></TD> <!-- End Main Content --> <!-- Start Footer --><TR align="center"><TD><table id="footer_table" align="center"> <tr> <td class="footer_td"> <a class="footer_a"; href="m.html">Misc</a> </td> <td class="footer_td"> 222 </td> <td class="footer_td"> <a class="footer_a"; href="l.html">Links</a> </td> </tr> </table></TR></TD> <!-- End Footer --></table></body></html> The CSS: #body{background-color: Moccasin;text-align: center;<strong>min-width: 760px;</strong>}#wrapper{width: 900px;margin: 0 auto;}#header{[color="#3333FF"]position: absolute;top: 6 px;[/color][/b][/u][b]right: center;z-index: 0;}#header-title{font-family: Verdana;color: White;font-size: 15px;z-index: 1;}#buttons_table{z-index: 0;width: 900px;border: "0px";cellpadding: "0px"; cellspacing: "0px";}td.buttons_td{width: 100;background-color: rgb(153, 51, 0);border:white 2px solid;text-align: center;}a.buttons_a{font-family: Verdana;color: White;text-decoration: none;text-style: bold;font-size: 15px;z-index: 0;}#main-content{z-index: 0;}#footer_table{height: 10px;width: 900px;z-index: 0;background-color: rgb(153, 51, 0);}a.footer_a{text-decoration: none;color: White;font-family: Verdana;font-size: 15px} Link to comment Share on other sites More sharing options...
jlhaslip Posted January 19, 2007 Share Posted January 19, 2007 Add a z-index to the class for the links to bring them forward of the filmstrip image. When they are behind the filmstrip, they don't react to the on-hover pseudo-class and they can't be clicked. Link to comment Share on other sites More sharing options...
dirt lover Posted January 19, 2007 Author Share Posted January 19, 2007 Everything below the film image will be lowered with absolute positions from the top if I can stop it from making things go right. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 20, 2007 Share Posted January 20, 2007 Why are you using position : absolute on a table based layout?Once I removed the position:absolute, the page seems to have straightened up and behaved itself. Header, horizontal navbar, content, footer, no overlapping of the images, all centred in the Browser. Position absolute references the containing block which it resides in and the element is removed from the document's normal flow, so it can be quite unpredictable. Point being, it is best avoided unless you are certain of its results.Similarly, this page is a perfect example of mis-using table-based layout when div's and document flow is the suitable method of presenting the information. Tables are not designed for page layout according to the w3c standards and causes problems with accesibility, too. To add insult to injury, you have used three tables???Oh, and remove the direction=LTR also. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now