nicht angemeldet
IE: position:relative & z-index
Hallo zusammen, bin mit meinem Latein am Ende, kann mir jemand helfen? Mein Problem:
Ich versuchte ein Menu mit kaskadierenden Submenus zu schreiben. Da das Teil auch ohne JS funktionieren soll, müssen die Menupunkte an einer bestimmten Position in der Datei eingebunden werden. Allerdings verschwindet die Box für das Submenu hinter anderen <div> Elementen die später in der Datei auftauchen, Operationen mit z-index führen zu keinerlei Ergebniss. DAS PASSIERT NUR IM IE!
Habe unter http://www.bitdump.de eine Beispieldatei abgelegt.
Es wäre wirklich klasse wenn jemandem dazu etwas einfällt. Dankeschön Daniel
Hier kommt der Sourcecode:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- .secondmenuactive{ position:relative; left:0px; height:18px; width:135px; border-style:solid; border-width:2px; font:bold 10px Verdana; color:#ffffff; padding-left:10px; padding-top:2px; } .secondmenubeneath { position:relative; z-index:2; left:0px; height:18px; width:135px; background-color:#e8e8de; border-bottom:solid 2px #b5b0a5; border-left:solid 2px #ffffff; border-right:solid 2px #b5b0a5; font:normal 10px Verdana; color:#000000; padding-left:10px; padding-top:2px; }
.thirdmenubox {position:absolute; z-index:3; border-width:1px; border-style:solid; border-color:#000000; display:normal; top:5px; left:125px; width:200px; }
.thirdmenuitem { background-color:#e8e8de; border-bottom: solid 1px #000000; height:14px; width:200px; }
.secondmenuspacer { position:relative; left:0px; width:135px; height:1px; padding:0px; marghin:0px; border-top:solid 1px #041b29; overflow:hidden; }
#content { position:absolute; left:160px; top:90px; background-color:green; border-left: solid 2px #b5b0a5; border-top: solid 2px #b5b0a5; border-right: solid 2px #ffffff; border-bottom: solid 2px #ffffff; width:767px; min-height:210px; z-index:2; }
--> </style>
<!--[if gte IE 5]> <style type="text/css"> #content {height:210px;} </style> <![endif]--> </head> <body>
<div id="secondmenu"> <div id="innersecondmenu"> <div id="m2007a" class="secondmenuactive"> <!--above,active,beneath--> <a href="/scripts/mgrqispi.dll?APPNAME=NEWMEDIA&PRGNAME=E_MEMBER_PAGE&ARGUMENTS=-N317984102620004,-N2700" class="secondmenu" style="color:white;font-weight:bold;">Member Page</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="/scripts/mgrqispi.dll?APPNAME=NEWMEDIA&PRGNAME=E_INBOX&ARGUMENTS=-N317984102620004,-N2701" class="secondmenu">Postkorb</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Meine Kontakte</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Kontake knüpfen</a> <div id="thirdmenubox1" class="thirdmenubox"> <div id="thirdmenuitem0|0" class="thirdmenuitem"> <a href="" class="thirdmenu">Kontake finden</a> </div> <div id="thirdmenuitem0|1" class="thirdmenuitem"> <a href="" class="thirdmenu">Vermittelte Kontake</a> </div> <div id="thirdmenuitem0|2" class="thirdmenuitem"> <a href="" class="thirdmenu">Zu vermittelnde Kontake</a> </div> <div id="thirdmenuitem0|3" class="thirdmenuitem"> <a href="" class="thirdmenu">Kontaktwunschliste</a> </div>
</div> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Events</a> </div> <div class="secondmenuspacer"></div>
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath--> <a href="" class="secondmenu">Arbeitskreise</a> </div> <div class="secondmenuspacer"></div>
</div> </div>
<div id="content"> Content Box </div> </body> </html>
-
wirklich niemand?
der Quellcode ist zwar lang aber recht gut zu lesen, weiß wirklich nicht mehr weiter?
Wäre echt lieb wenn jemand helfen könnte
danke
daniel-
der Quellcode ist zwar lang aber recht gut zu lesen, weiß wirklich nicht mehr weiter?
Was ist der?
Das ist eine typische DIV suppe, du solltest deine Seite mit HTML auszeichnen.Meine suche nach 'css' und 'popmenu' brachte folgende Ergebnisse bei google:
http://www.google.de/search?q=popup+menu+css&ie=ISO-8859-1&hl=de&meta=lr%3Dlang_de|lang_enhttp://www.meyerweb.com/eric/css/edge/menus/demo.html
(wobei das soweit ich weiß nicht im IE funktioniert, es gibt aber workarounds)Vielleicht findest du hier was:
http://css.maxdesign.com.au/listamatic/Struppi.
-
-
Hi,
bin mit meinem Latein am Ende, kann mir jemand helfen? Mein Problem:
probiers mit dem Validator.
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath-->
<div id="m0a" class="secondmenubeneath"> <!--above,active,beneath-->Mehrfach die selbe ID. Nicht erlaubt.
<div id="thirdmenuitem0|0" class="thirdmenuitem">
| gehört nicht zu den in id erlaubten Zeichen.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.