PDA

View Full Version : Best way to implement a drop down menu


Golden Child
06-14-2011, 07:21 PM
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>

johnMoss
06-14-2011, 09:39 PM
Have you tried absolutely positioning the menu div? My first thought is the rest of the page will ignore it; and if it works, you probably have to adjust the flow of the page downward...

Corrosive
06-16-2011, 06:01 AM
Tables and slices is a terrible way to build a website. Learning the proper way will make jobs like this much easier in the long run.