navigator umbauen
timo weber
- html
habe mir einen script für einen navigator gezogen. Der gefällt mir zwar auch, aba ich möchte die Menüpunkte liebe untereinander und rechts haben als wie jetzt nebeneinander und oben.....wie mache ich das??? hier der quelltest, doch nur der interessante teil....
<font color="000066" face="century gothic" size"1">
<span style="font-size:12pt">
<div id="b" style="position:absolute; left:30; top:2; width:340; height:170; z-index:1; visibility: hidden">
<a href="#" onmouseover="clean()" onmouseout="clean()"> </a>
</div>
<div id="h1" style="position:absolute; left:50; top:2; width:100; height:25;z-index:2; visibility: visible">
<a href="#" onmouseover="menu(1)">Die Firma</a>
</div>
<div id="m1" style="position:absolute; left:60; top:30; width:200; height:50; z-index:3; visibility: hidden" >
<a href="firmengeschichte.htm" target="haupt">Firmgeschichte</a><br>
<a href="firmenprofil.htm" target="haupt">Firmenprofil</a><br>
<a href="news.htm" target="haupt">Haseborg News</a><br>
</div>
<div id="h2" style="position:absolute; left:150; top:2; width:100; height:25; z-index:4; visibility: visible">
<a href="hintergrund.htm" onmouseover="menu(2)">Hintergrund</a></div>
<div id="m2" style="position:absolute; left:160; top:30; width:200; height:150; z-index:5; visibility: hidden">
<a href="rundgang.htm" target="haupt">Rundgang durch die Werkstatt</a><br>
<a href="links.htm" target="haupt">Links für Orgelfreunde</a><br>
<a href="#" target="haupt">Gästebuch</a><br>
</div>
<div id="h3" style="position:absolute; left:280; top:2; width:100; height:25; z-index:6">
<a href="#" onmouseover="menu(3)">Referenzliste</a>
</div>
<div id="m3" style="position:absolute; left:290; top:30; width:200; height:150; z-index:7; visibility: hidden">
<a href="neubauten.htm" target="haupt">Neubauten</a><br>
<a href="restaurierungen.htm" target="haupt">Restaurierungen</a><br>
</div>
<div id="h4" style="position:absolute; left:410; top:2; width:100; height:25; z-index:7">
<a href="#" onmouseover="menu(4)">Audio</a>
</div>
<div id="m4" style="position:absolute; left:420; top:30; width:200; height:150; z-index:8; visibility: hidden">
<a href="hoerbeispiele.htm" target="haupt">Hörbeispiele</a><br>
</div>
<div id="h5" style="position:absolute; left:510; top:2; width:100; height:25; z-index:7">
<a href="#" onmouseover="menu(5)">Kontakt</a>
</div>
<div id="m5" style="position:absolute; left:520; top:30; width:150; height:150; z-index:8; visibility: hidden">
<a href="info.htm" target="haupt">Informationen</a><br>
<a href="shop.htm" target="haupt">Shop</a><br>
<a href="mail.htm" target="haupt">e-mail</a><br>
</span>
</font>
wenn ihr alle sehen wollte geht auf:
http://www.orgelbau-haseborg.com/oben.htm
danke
hallo,
ich möchte die Menüpunkte lieber untereinander und rechts haben als wie jetzt nebeneinander und oben.....wie mache ich das???
das machst du, indem du versuchst, dein (ziemlich einfaches) Script zu verstehen. Es steht doch alles drin:
<div id="b" style="position:absolute; left:30; top:2; width:340; height:170; z-index:1; visibility: hidden">
hier wird der erste Layer absolut positioniert, mit einem Abstand von links mit 30px und von oben mit 2px.
Die Angabe "top:2" steht bei allen deinen Layern drin, deshalb fangen sie alle ordentlich oben an. Verändere diese Positionierungsangaben, und du bekommst, was du haben möchtest.
Ein Hinweis ist für dich noch wichtig: man sollte solche Positionierungen nicht mit "style" unmittelbar innerhalb der HTML-Elemente vornehmen, sondern in eine CSS auslagern - genauso die störenden Angaben zu <font>. Sowas gehört nicht mehr in HTML, sonderen sollte grundsätzlich mit CSS gemacht werden.
Christoph S.
hi
erstmal sollte man dafür sorgen, dass das Script auch funktioniert ;)
Dafür muss vor allem mal bei left:, top: width: und height: hinter die Zahlen ein "px", damit der Browser auch weiß, das das in Pixeln zu verstehen ist. Ohne funktioniert das nur im MSIE5 sicher, neuere Browser mögen das nicht mehr so gerne (und btw. ist es auch schlicht falsch).
Und die Abfrage für Netscape 4 gewinnt auch keinen Schönheitswettbewerb ;)
if(document.layers) ist sicherer als das "if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))".
Grüße aus Bleckede
Kai