[JS] dropdownmenu mozilla - Softwareontwikkeling

maandag 5 mei 2003 23:49

Acties:

Topicstarter

Ik ben voor mijn website bezig met een dropdown menu, deze wordt uiteindelijk database driven. Nu wil het dropdown menu perfect onder ie6 werken maar niet 'goed' onder mozilla

Maarja ik ben een beetje html noob, maar met behulp van google heb ik de document.all vervangen door document.getElementById in het javescript gedeelte.

Nu werkt hij nog goed onder ie6, en onder mozilla komen de dropdown menus, maar niet goed. Nu ook alleen deze moeten onder het menu komen waar de mouseover actie begint net zoals bij ie6 en niet erover heen.

vb http://www.kruyt.org/dev/test.html

code:

<html>
<head>
<style>
body{font-family:verdana;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:orange}
td.menu{background:green}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
<title></title>
</head>
<body bgcolor="#000000">
<table width="100%">
<tr bgcolor="#CCFFCC">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
<a href="index.htm">Site 1</a><br />
<table class="menu" id="site1" width="100%">
<tr><td class="menu"><a href="pag1.htm">Wie</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">Wat</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">Waar</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">Waarom</a></td></tr>
<tr><td class="menu"><a href="pag5.htm">Wanneer</a></td></tr>
</table>
</td>
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')">
<a href="http://www.site2.nl">Site 2</a><br />
<table class="menu" id="site2" width="100%">
<tr><td class="menu"><a href="http://www.site2.nl/pag1.htm">Wie</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag2.htm">Wat</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag3.htm">Waar</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag4.htm">Waarom</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag5.htm">Wanneer</a></td></tr>
</table>
</td>
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')">
<a href="http://www.site3.nl">Site 3</a><br />
<table class="menu" id="site3" width="100%">
<tr><td class="menu"><a href="http://www.site3.nl/pag1.htm">Wie</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag2.htm">Wat</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag3.htm">Waar</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag4.htm">Waarom</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag5.htm">Wanneer</a></td></tr>
</table>
</td>
</table>
</body>
</html>

dinsdag 6 mei 2003 00:00

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

je plaatst hier een andere code dan op je site

iig zal het helpen om die

code:

1	position:absolute;

bij je style voor table.menu weg te halen: deze geeft je table een absolute positionering in mozilla

verder moet je echt wat aandacht besteden aan net coderen:

code:

[...]
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<html>
<head>
[...]

is een compleet onzinnige opvolging van tags, en je moet niet verwachten dat je enige controlle kunt uitoefenen wat er met zulk een code in browsers gebeurt, als ik zelf een browserbouwer was zou ik op zo'n code de rendering in Quirky mode laten terugspringen naar een simulatie van netscape navigator 0.9.

een beetje nette en consequente indenting kan je ook helpen.

[ Voor 58% gewijzigd door RM-rf op 06-05-2003 00:03 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 6 mei 2003 00:07

Acties:

eth0

Topicstarter

Heb de

code:

1	position:absolute;

nu weg gehaald.

http://www.kruyt.org/dev/test2.html mmmm, nu is het wel erg anders

zowel ie6 als mozilla zijn nu het zelfde. maar niet zoals ik wil

[ Voor 50% gewijzigd door eth0 op 06-05-2003 00:12 ]

dinsdag 6 mei 2003 00:16

Acties:

crisp

Devver

Pixelated

eth0 schreef op 06 May 2003 @ 00:07:
http://www.kruyt.org/dev/test2.html mmmm, nu is het wel erg anders

Die absolute positionering is wel degelijk noodzakelijk, alleen moet hij wel absoluut zijn t.o.v. de cell waar die in staat. Hiervoor is het noodzakelijk om een relatief gepositioneerde layer om het menu heen te zetten:

HTML:

<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
<a href="index.htm">Site 1</a><br />
<div style="position: relative">
  <table class="menu" id="site1" width="100%">
    <tr><td class="menu"><a href="pag1.htm">Wie</a></td></tr>
    <tr><td class="menu"><a href="pag2.htm">Wat</a></td></tr>
    <tr><td class="menu"><a href="pag3.htm">Waar</a></td></tr>
    <tr><td class="menu"><a href="pag4.htm">Waarom</a></td></tr>
    <tr><td class="menu"><a href="pag5.htm">Wanneer</a></td></tr>
    </table>
  </div>
</td>

Intentionally left blank

dinsdag 6 mei 2003 00:31

Acties:

eth0

Topicstarter

Aah, dit lijkt er meer op http://www.kruyt.org/dev/test3.html

heb de position:absolute; teruggeplaats en <div style="position: relative"> in elke cell geplaatst

thxs,