Bestemt placering af js menu
HejNu har jeg efterhånden kigget rigtig rigig mange spørgsmål igennem her på eksperten og stadig ikke fundet en løsning på mit problem, så...
Er det muligt at placere en en drop down menu et bestemt sted (i en tabel)på en side? Hvis ja, hvordan gør jeg lige?
Lidt mere forklaring. Jeg har en side med en tabel. I den tabel har jeg en række hvor jeg gerne vil have min drop down menu. Men mit problem er at mine underpunkter nærmest "flyver" rundt på siden.
Her er den kode jeg har aarbejdet med:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Tjalfe & Luka</title>
<Link Rel="stylesheet" href="tjalfe_luka.css" Type="text/css" ><!-- link til ekstern style sheet -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #ffffff;
margin-top: 50px;
}
.style1 {
color: #FFFFFF;
font-weight: bold;
}
.style2 {color: #FFFFFF}
-->
</style>
<!--script til menu-->
<script>
function expand(s, m)
{
var browser = window.navigator.appName;
var dif = 0;
if (browser != "Microsoft Internet Explorer") { dif = 12; }
var d = document.getElementById(m);
var td = document.getElementById(s);
var left = td.offsetLeft;
var top = td.offsetTop + 25;
var width = td.offsetWidth - dif;
td.style.color = "#FFFFFF";
td.style.backgroundColor = "#243d84";
d.style.top = top;
d.style.left = left;
d.style.width = width;
d.style.position = "relative";
d.style.visibility = "visible";
d.style.display = "block";
}
function collapse(s, m)
{
var d = document.getElementById(m);
var td = document.getElementById(s);
td.style.color = "#243d84";
td.style.backgroundColor = "#243d84";
d.style.position = "static";
d.style.visibility = "hidden";
d.style.display = "none";
}
function collapseAll()
{
var menuDiv = document.getElementById("menu");
var divs = menuDiv.getElementsByTagName("div");
var div;
for (i = 0; i < divs.length; i++)
{
div = divs[i];
div.style.visibility = "hidden";
div.style.display = "none";
}
}
</script>
<!--script til menu slut-->
</head>
<body onload="java script:collapseAll();"> <!--onload skal være med for at scriptet til menuen virker-->
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#d6dcee">
<tr>
<td colspan="2"><img src="../gfx/top_grafik.jpg" width="900" height="150"></td>
</tr>
<tr bgcolor="#243d84">
<td width="200" height="25"> </td>
<td width="700" height="25"><!--række med menuen-->
<div id="menu" onmouseout="java script:collapseAll();">
<table id="navBar" width="700">
<tr>
<td class="button" width="100" valign="top" id="item1" onmouseover="expand(this.id, 'menu1');" onmouseout="collapse(this.id, 'menu1');"><span class="style2"><b>FORSIDE</b></span>
<div id="menu1" class="exp" onmouseout="collapse('item1', this.id);">
<!--<p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div></td>
<td class="button" width="100" valign="top" id="item2" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');"><span class="style2"><b>LIDT OM OS</b></span>
<div id="menu2" class="exp" onmouseout="collapse('item2', this.id);">
<!--<p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div></td>
<td class="button" width="100" valign="top" id="item3" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');"><span class="style2"><b>KATTENE</b></span> <div id="menu3" class="exp" onmouseout="collapse('item3', this.id);"> <a href="page.htm" class="menuitem">TJALFE</a><a href="page.htm" class="menuitem">LUKA</a>
<!--<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div></td>
<td class="button" width="100" valign="top" id="item4" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');"><span class="style2"><b>GALLERI</b></span> <div id="menu4" class="exp" onmouseout="collapse('item4', this.id);">
<p class="button"><a href="page.htm" class="menuitem">GALLERI 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">GALLERI 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">GALLERI 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">GALLERI 4</a></p>
</div></td>
<td class="button" width="100" valign="top" id="item5" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');"><span class="style2"><b>BIRMAEN</b></span> <div id="menu5" class="exp" onmouseout="collapse('item5', this.id);">
<!--<p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div>
</td>
<td class="button" width="100" valign="top" id="item6" onmouseover="expand(this.id, 'menu6');" onmouseout="collapse(this.id, 'menu6');"><span class="style2"><b>KONTAKT</b></span> <div id="menu6" class="exp" onmouseout="collapse('item6', this.id);">
<!--<p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div>
</td>
<td class="button" width="100" valign="top" id="item7" onmouseover="expand(this.id, 'menu7');" onmouseout="collapse(this.id, 'menu7');"><span class="style2"><b>LINKS</b></span> <div id="menu7" class="exp" onmouseout="collapse('item7', this.id);">
<!--<p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
<p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>-->
</div>
</td>
</tr>
</table>
</div>
</td><!--slut på række med menu-->
</tr>
<tr>
<td width="200" height="131"><div align="left"><img src="../gfx/lille_foto_1.jpg" width="198" height="129"></div></td>
<td width="700" rowspan="4"><div align="center">
<iframe name="tekst" src="forside.htm" width="690" height="514"
scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="FILTER: chroma(color=#dce7f8)" allowTransparency>[Din browser understøtter ikke frames. Denne side er optimeret til internet explorer, se siden <a href="forside.htm"> klik her.</a>] </iframe>
<!-- iframe slut -->
</div></td>
</tr>
<tr>
<td height="131"><div align="left"><img src="../gfx/lille_foto_2.jpg" width="198" height="129"></div></td>
</tr>
<tr>
<td height="131"><div align="left"><img src="../gfx/lille_foto_3.jpg" width="198" height="129"></div></td>
</tr>
<tr>
<td height="131"><div align="left"><img src="../gfx/lille_foto_4.jpg" width="198" height="129"></div></td>
</tr>
</table>
<div align="center">Michael F. Andersen & Gitte V. Pedersen | e-mail: </div>
</body>
</html>
Håber der er nogen der kan hjælpe.
/Annette
