Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Trouble-shooting with drop down menus

G

Golden Child

macrumors newbie
Original poster
Mar 1, 2011
11
0
I have created a website using a table and slices and it is making it a little difficult to implement a drop down menu. The drop down function works fine on my site. However, when I click on the drop down menu on my site, it pushes down all of the images below it instead of overlapping the slideshow in my site. What can I do so the drop down menu will function properly? Here is the code:

<!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=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery1.6.1.min.js"></script>
<script type="text/javascript" src="menuslider.js"></script>
<link href="untitled.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {margin:0}
a img {
border: none;
}
</style>
</head>

<body><table width="1303" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="741"><img src="../../../T of D/TD Main test/Main_Head1.gif" width="741" height="136" /></td>
<td width="562"><img src="../../../T of D/TD Main test/Main_Head2.gif" width="539" height="136" /></td>
</tr>
<tr>
<td><img src="../../../T of D/TD Main test/Main_Homeleft.gif" width="184" height="48" /><img src="../../../T of D/TD Main test/Main_Home.gif" class="menu_class"/>
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
<img src="../../../T of D/TD Main test/Main_About.gif" width="145" height="48" /><img src="../../../T of D/TD Main test/Main_Events.gif" width="143" height="48" /><img src="../../../T of D/TD Main test/Main_Media.gif" width="138" height="48" /></td>
<td><img src="../../../T of D/TD Main test/Main_Store.gif" width="145" height="48" /><img src="../../../T of D/TD Main test/Main_Ministries.gif" width="134" height="48" /><img src="../../../T of D/TD Main test/Main_MiniRight.gif" width="260" height="48" /></td>
</tr>
<tr>
<td><img src="../../../T of D/TD Main test/Main_SlideLeft.gif" width="184" height="344" /><iframe src="Demo 6.html" height="343" width="555" scrolling="no" frameborder="0"></iframe></td>
<td><img src="../../../T of D/TD Main test/Main_WordLeft.gif" width="42" height="119" /><img src="../../../T of D/TD Main test/Main_WordWeek.gif" width="302" height="119" /><img src="../../../T of D/TD Main test/Main_WordRight.gif" width="195" height="119" /><body><img src="../../../T of D/TD Main test/Main_swfleft.gif" width="42" height="225" /><object id="whatever" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="225" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
<param name="src" value="example.swf"/>
<param name="bgcolor" value="none"/>
<param name="quality" value="best"/>
<embed name="whatever" src="../Movies/DoremiSoft Studio/WheatonEditP-20110607-151910/WheatonEditP.swf" width="300" height="225" bgcolor="none" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
<img src="../../../T of D/TD Main test/Main_swfRight.gif" width="195" height="225" /></td>
</tr>
<tr>
<td><img src="../../../T of D/TD Main test/Main_middle1.gif" width="741" height="17" /></td>
<td><img src="../../../T of D/TD Main test/Main_middle2.gif" width="539" height="17" /></td>
</tr>
<tr>
<td><img src="../../../T of D/TD Main test/Main_PrayerLeft.gif" width="184" height="121" /><img src="../../../T of D/TD Main test/Main_Prayer.gif" width="179" height="121" /><img src="../../../T of D/TD Main test/Main_PrayerServices.gif" width="11" height="121" /><img src="../../../T of D/TD Main test/Main_Services.gif" width="176" height="121" /><img src="../../../T of D/TD Main test/Main_ServicesDonate.gif" width="14" height="121" /><img src="../../../T of D/TD Main test/Main_Donate.gif" width="177" height="121" /></td>
<td><img src="../../../T of D/TD Main test/Main_DonateRight.gif" width="539" height="121" /></td>
</tr>
<tr>
<td><img src="../../../T of D/TD Main test/Main_Bottom1.gif" width="741" height="27" /></td>
<td><img src="../../../T of D/TD Main test/Main_Bottom2.gif" width="539" height="27" /></td>
</tr>
</table>
</body>
</html>
Click to expand...
 
First problem is that you're using a table for layout. It will never allow you to truly design like you want. You need CSS for a drop-down menu to function properly. Redesign your site using divs and CSS positioning, and you'll be able to achieve what you're looking for.

jW
 
Mal said:
First problem is that you're using a table for layout. It will never allow you to truly design like you want. You need CSS for a drop-down menu to function properly. Redesign your site using divs and CSS positioning, and you'll be able to achieve what you're looking for.
jW
Click to expand...

Not absolutely true. You can wrap your drop down menu in a div and give it a different z-index and that should not push your layout. But I definitely agree that you should learn how to not use a table for layout.
 
You really need to upload this somewhere with all the images and the broken drop down if you want any help in troubleshooting. Pasting in the HTML alone just isn't going to do it.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back