orion pax Posted October 30, 2006 Share Posted October 30, 2006 I am trying to make a menu of links on the left hand side of a site and trying to do it with out frames. I made a table with 2 rows and 2 columns. dzhyde.com It shows up fine in firefox if the window is maximized. If you resize it, the table that contains my menu table (a table inside of a table, only way to get the buttons to line up I think), dissapears while the menu table that contains my buttons stays right where I placed it using css position absolute. Is there a way to force the table not to resize. The main table is the FRAME of my site. Top left is a small square that will just have a small graphic in it. then next to that is the banner. on row 2 we have the menu section and then the main section. The menu section contains my menu table. The main section is where the links show up which are loaded in an iframe that is modified with a java script. There are some IE issues there too but I will deal with soon. Here is the code....HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>DZHYDE.COM</title><link href="default.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function changeiframe(id,shtml){document.getElementById(id).src=shtmlvar number = (Math.floor(Math.random()*6))if (number==1)(document.body.background="images/background1.jpg")if (number==2)(document.body.background="images/background2.jpg")if (number==3)(document.body.background="images/background3.jpg")if (number==4)(document.body.background="images/background4.jpg")if (number==5)(document.body.background="images/background5.jpg")}</script></head><body bgcolor="#FFFFFF" background="images/background1.jpg" text="#000000" link="#0000FF" vlink="#00FF00" alink="#FF0000"><table> <tr> <td width="250" height="100" background="images/nose.png" class="norepeat"></td> <td width="600" height="100" background="images/dzhyde.jpg"class="norepeat"></td> </tr> <tr> <td background="images/menu.jpg" width="250" height="400" class="norepeat"> <span class="class1"> <table class="menu2" width="250" height="400" border="0"> <tr> <th width="115" scope="row"></th> <td width="117" height="40"><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','http://www.stormannormandproductions.com/cgi/dzhyde/news.pl')"><img src="images/news.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','schedule.html')"><img src="images/schedule.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','forum.html')"><img src="images/forum.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','bio.html')"><img src="images/bio.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','piedcount.html')"><img src="images/piedcount.png"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','media.html')"><img src="images/media.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','forthefans.html')"><img src="images/forthefans.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><a href="java script:;" class="menu" onclick="changeiframe('main','links.html')"><img src="images/links.jpg"/></a></div></td> </tr> <tr> <th scope="row"></th> <td><div align="center"><embed src="sounds/circus.mp3" width="140" height="20"></embed></div></td> </tr></table></span></td> <td width="600" height="600" align="left" valign="top" background="images/circus_tent.png" class="norepeat"><iframe src="http://www.stormannormandproductions.com/cgi/dzhyde/news.pl" width="600" height="600" scrolling="Auto" frameborder="0" id="main"></iframe></td> </tr></table></body></html> CSS td.norepeat { background-repeat: no-repeat;}.class1 A:link {text-decoration: none; color:#7B6952}.class1 A:visited {text-decoration: none; color:#7B6952}.class1 A:active {text-decoration: none; color:#7B6952}.class1 A:hover {text-decoration: none; color:#7B6952}table.menu2 { position: absolute; left: 10px; top: 170px;} Link to comment Share on other sites More sharing options...
orion pax Posted October 30, 2006 Author Share Posted October 30, 2006 Since no one seemed to know of a way to fix this I did some looking around and learned about #wrapper with div's. So I eliminated my MAIN TABLE that was holding everything and used div's to position everything while still using my nav bar table. I can reduce the size of my nav bar table as well. I just have to play with the z-index now to see how it works. I appreciate any other suggestions or hints of any nature. if you want to see what I have done with the div's compared to my original layout www.dzyhyde.com/test.html 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