nicht angemeldet
Ich möchte ein sticky menu erzeugen, also eins, das beim scrollen immer im
sichtbaren Bereich bleibt. Dazu beutze ich folgendes css und folgendes JavaScript:
<script language="JavaScript">
function setVariables()
{
if (navigator.appName == "Netscape")
{
dS="document.";
sD="";
v=".top=";
y="window.pageYOffset+10";
}
else
{dS="";
sD=".style";
v=".pixelTop=";
y="document.body.scrollTop+10";}
}
function checkLocation()
{
object="Navi";
yy=eval(y);
if (navigator.appName == "Netscape"){eval(dS+object+v+yy);}
else {eval(object+sD+v+yy);}
setTimeout("checkLocation()",100)
}
</script>
<style type="text/css">
.rot {background-color:#F82800;}
.textnavi {color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
a.textnavi:hover
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: underline;
}
a.textnavi:active
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
a.textnavi:visited
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
.textnavi1
{color:#FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-indent:2px;
text-decoration: none;
}
.text {color:#202020;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
text-indent: 10px;
text-align: justify;
}
</style>
Die JS-Funktionen werden im body durch onLoad aufgerufen. Das geht alles.
Aber Netscape 4.x interpretiert dann auf einmal die class-Zuweisungen für
die einzelnen Tags nicht mehr. Ich hab also ein sticky menu, das voll mies
aussieht. Ohne das Script werden die css-classes wieder interpretiert.
Was sollte ich anders machen?
Hier noch der Code für das menu:
<script language="JavaScript">
if (navigator.appName == "Netscape")
{document.write("<layer id="Navi" style="position:absolute;top:10px;left:10px;z-index:2;">")}
else
{document.write("<div id="Navi" style="position:absolute;visibility:show;top:10px;left:570px;z-index:2;">")}
</script>
<table width="100" cellspacing="0" cellpadding="0" border="0">
<tr><td class="rot" rowspan="11"><img src="images/spacer.gif" width="1" height="150" border="0" alt=""></td>
<td class="rot" colspan="3"><img src="images/spacer.gif" width="118" height="1" border="0" alt=""></td>
<td class="rot" rowspan="11"><img src="images/spacer.gif" width="1" height="150" border="0" alt=""></td></tr>
<tr><td rowspan="10"><img src="images/spacer.gif" width="2" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
<td rowspan="10"><img src="images/spacer.gif" width="2" height="1" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/gelb.gif);" class="navi1">
<a href="#top" class="textnavi1">Mittwoch:</a></td></tr>
<tr><td class="textnavi">
<a href="#screen1" class="textnavi">DIY Revisited</a><br>
<a href="#screen2" class="textnavi">Twisted Love Stories</a><br>
<a href="#inter" class="textnavi">Interactive Art</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/gruen.gif);">
<a href="#d2" class="textnavi1">Donnerstag:</a></td></tr>
<tr><td class="textnavi">
<a href="#public" class="textnavi">Public Space Invaders</a><br>
<a href="#strange" class="textnavi">Strange Guys</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/blau.gif);">
<a href="#d3" class="textnavi1">Freitag:</a></td></tr>
<tr><td class="textnavi">
<a href="#ctrl" class="textnavi">CTRL Space</a><br>
<a href="#awimage" class="textnavi">Award:Image</a><br>
<a href="#nybble" class="textnavi">NYBBLE Engine</a><br>
<a href="#soft" class="textnavi">Software Speculations</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td class="rot" colspan="5"><img src="images/spacer.gif" width="120" height="1" border="0" alt=""></td></tr>
</table>
<script language="JavaScript">
if (navigator.appName == "Netscape")
{document.write("</layer>")}
else {document.write("</div>")}
</script>