wipeout
Threadersteller
Dabei seit: 20.05.2005
Ort: -
Alter: 40
Geschlecht: 
|
Verfasst Do 28.08.2008 14:20
Titel HTML-Navigation vor Flash (Z-Index) |
  |
|
Auf folgender Seite:
http://www.ckmb.de/test/dana/
habe ich ein Flash-Objekt über das eine Navigation gelagert ist. Das Flash-Objekt habe ich mit dem wmode richtig gesetzt, damit auch alles richtig angezeigt wird. Klappt auch soweit im FF, IE und Safar, nur nicht im Opera. Logo und Navigation werden zwar angezeigt, allerdings funktioniert die Navigation nicht mehr.
HTML:
| Code: |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Haus Dana</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="wrapper">
<div id="logo_container"><img src="images/dana_logo.jpg" alt="Haus Dana" /></div>
<div id="navigation_container">
<ul>
<li class="dana"><a href="#"><strong>Haus Dana</strong></a></li>
<li class="termine"><a href="#"><strong>Termine</strong></a></li>
<li class="preise"><a href="#"><strong><strong>Preise und Buchung</strong></strong></a></li>
<li class="anreise"><a href="#"><strong>Anreise und Lageplan</strong></a></li>
<li class="borkum"><a href="#"><strong>Borkum</strong></a></li>
</ul>
</div>
<div id="flash_container">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','860','height','500','id','slideshow_as2','align','middle','src','slideshow_as2','quality','high','bgcolor','#000000','name','slideshow_as2','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','opaque','movie','slideshow_as2' ); //end AC code
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="860" height="500" id="slideshow_as2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="wmode" value="opaque" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#000000" width="860" height="500" name="slideshow_as2" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque"></embed>
</object>
</noscript>
</div>
<div id="left_row">
<p>Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewusst hätte, dass Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben - da hätte ich wahrlich was Besseres schreiben können als diesen Stuss. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten - und dann das hier! Ehrlich gesagt: Ich weiss auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe - Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben - da kann ich soviel Goldmedaillen haben, wie ich will. Dies ist der Beweis: Jacoby kann's einfach nicht, Schluss aus!</p>
</div>
<div id="right_row">
<p>Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewusst hätte, dass Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben - da hätte ich wahrlich was Besseres schreiben können als diesen Stuss. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten - und dann das hier! Ehrlich gesagt: Ich weiss auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe - Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben - da kann ich soviel Goldmedaillen haben, wie ich will. Dies ist der Beweis: Jacoby kann's einfach nicht, Schluss aus!</p>
</div>
</div>
<div id="foot">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum/AGB</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</body>
</html>
|
CSS
| Code: |
@charset "UTF-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
html, body {
padding: 0;
margin: 0;
background: #3f4e54;
}
#main_container {
position: relative;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
width: 900px;
background: url(../images/schatten_oben.jpg) no-repeat;
overflow: hidden;
z-index: 1;
}
#wrapper {
position: relative;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
width: 900px;
background: #FFFFFF;
overflow: hidden;
z-index: 2;
}
#logo_container {
position: relative;
margin-top: 20px;
margin-left: 40px;
width: 180px;
height: 100px;
z-index: 99;
}
#navigation_container {
position: relative;
margin-top: 350px;
margin-left: 40px;
width: 600px;
z-index: 99;
}
#flash_container {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
width: 860px;
height: 500px;
background: #000000;
z-index: 1;
}
#left_row {
position: relative;
margin-top: 20px;
margin-left: 40px;
width: 180px;
float: left;
z-index: 4;
}
#right_row {
position: relative;
margin-top: 20px;
margin-right: 40px;
width: 620px;
float: right;
z-index: 4;
}
#foot {
position: relative;
width: 900px;
background: url(../images/schatten_unten.jpg) no-repeat;
z-index: 2;
overflow: hidden;
}
#foot ul {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 300px;
padding: 2px 10px;
clear:left;
list-style-type: none;
overflow: hidden;
}
#foot ul li {
border:none;
display:inline;
float:left;
margin-right: 20px;
}
#foot ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
}
#foot ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: underline;
}
/*---Navigation---*/
#navigation_container ul {
width: 600px;
margin-left: auto;
margin-right: auto;
background: url(../images/navigation.jpg) no-repeat;
overflow: hidden;
clear: both;
}
#navigation_container ul li {
display: block;
float:left;
}
#navigation_container ul li a {
display: block;
width: 120px;
height: 50px;
margin: 0;
padding: 0;
}
#navigation_container ul li a strong {
display: none;
}
#navigation_container ul li.dana a:hover {
background-image: url(../images/navigation.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
#navigation_container ul li.termine a:hover {
background-image: url(../images/navigation.jpg);
background-position: -120px -50px;
background-repeat: no-repeat;
}
#navigation_container ul li.preise a:hover {
background-image: url(../images/navigation.jpg);
background-position: -240px -50px;
background-repeat: no-repeat;
}
#navigation_container ul li.anreise a:hover {
background-image: url(../images/navigation.jpg);
background-position: -360px -50px;
background-repeat: no-repeat;
}
#navigation_container ul li.borkum a:hover {
background-image: url(../images/navigation.jpg);
background-position: -480px -50px;
background-repeat: no-repeat;
}
|
Vielleicht hat ja jemand eine Idee wie man das beheben kann (obwohl man Opera ja relativ gut vernachlässigen kann. Die Zielgruppe wird eh vermehrt mit dem IE unterwegs sein  )
|
|
Willkommen auf dem Portal für Mediengestalter
