THE STELL: Horizontales Drop-Down hinter PDF in iFrame.

Beitrag lesen

SELF-Forum

Horizontales Drop-Down hinter PDF in iFrame.

THE STELL
– Informationen zu den Bewertungsregeln

Hi Leute,

Ich habe ein horizontales CSS-Drop-Down-Menü, das sich, wenn man über eine Kategorie fährt, die Unterseiten anzeigt. Da nicht alle Browser CSS-Drop-Downs unterstüzen (Steinzeitbrowser wie IE6), gibt es auch noch ein JS, dass die Drop-Downs öffnet.

Es ist sehr wichtig, dass die PDFs im Fenster geöffnet werden. Und da das mit include() nicht geht, muss ich die einfache, aber immer noch gute iFrame-Technik anwenden.

Wenn ich eine normale Seite in einen Inlineframe sperre, funzt auch noch alles: Das Drop-Down überlagert die Webseite im iFrame. So bald ich statt einer HTML-Datei ein PDF-Datei framiesiere, ist das aber nicht mehr so: Die drop-downs verschwinden hinter dem Adobe Programme (oder einem anderen PDF-Leser des Nutzers).

Ich weiß, dass es eine Externe Anwendung ist, aber bei Flash geht das auch, also sollte es bei PDF doch auch irgendeine Lösung geben, oder?

Ich weiß auch, dass sich das nicht bei allen Usern in der Iframe startet. Ich will aber, dass die User, bei denen das geht, den vorteil geniesen können.

Hier noch der Problemcode zum ausprobieren:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<title>css drop down</title>  
<style type="text/css">

  
body{font-family:georgia;}  
#container{width:500px;margin:auto;font-size:11pt;}  
  
#menu{position:absolute;margin-top:10px;}  
#menu ul .item{display:none;}  
#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}  
  
#menu ul:hover .item a{color:#fff;text-decoration:none;}  
#menu ul:hover .item a:hover{color:#999;}  
  
#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}  
.clear{clear:both;height:30pt;}  
#content iframe{width:100%;height:600px;}

  
</style>  
  
</head>  
<body>  
<div id="container">  
<h1>css drop down</h1>  
  
<div id="menu">  
  
<ul id="item1">  
<li class="top">menu item</li>  
<li class="item"><a href="#">menu item 1</a></li>  
<li class="item"><a href="#">menu item 2</a></li>  
<li class="item"><a href="#">menu item 3</a></li>  
</ul>  
  
<ul id="item2">  
<li class="top">menu item</li>  
<li class="item"><a href="#">menu item 1</a></li>  
  
</ul>  
  
<ul id="item3">  
<li class="top">menu item</li>  
<li class="item"><a href="#">menu item 1</a></li>  
<li class="item"><a href="#">menu item 2</a></li>  
</ul>  
  
<ul id="item4">  
<li class="top">menu item</li>  
<li class="item"><a href="#">menu item 1</a></li>  
<li class="item"><a href="#">menu item 2</a></li>  
  
<li class="item"><a href="#">menu item 3</a></li>  
<li class="item"><a href="#">menu item 4</a></li>  
</ul>  
  
</div>  
<div class="clear"></div>  
  
  
<div id="content">  
<iframe src="http://www.oeaw.ac.at/ita/ebene5/wp-mpifg.pdf"></iframe>  
Und das Menü verschwindet hinter dem PDF.  
  
PS: Ich habe für das Beispiel den Code von der Basis meines Menüs genommen, da das Menü meiner Seite zu komplex zu exportieren ist und zum demonstrieren tut es das auch. das heißt, dass das JS noch nicht drin ist.</div>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln