Dropdown Menü verschwindet hinter Video

Massacre · 17.12.2009

Hallöle ich hab da ein Problem und zwar hab ich ein Dropdown menü in CSS gemacht und nun hab ich ein Video eingefügt und jetzt verschwindet die Dropdownleiste hinter dem Video.
Wie bekomm ich das Menü dazu immer im Vordergrund zu sein???

noxhirsch · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

Das liegt an Flash, weil sich flash immer in den Vordergrund drängt

Massacre · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

bekomme ich das irgendwie unterbunden ?

MyBad · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

Du kannst das Problem mit "WMODE="TRANSPARENT" fixen.

Massacre · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

hmm des funktioniert bei mir nicht wirklich.
ich habs jetzt an verschiedenen stellen versuch ich kann euch ja mal den Code schicken und ihr könnt mir genau sagen wo es hin muss damit es funktioniert.

Code:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
       <title>Portal24.tv Entertainment Multimedial</title>
       <meta name="author" content="Sebastian Lutz" />
       <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
	     
  </head>
  <body>
       <div id="header_background">
	   
	   	 	   	
	   </div>
	   
	   <div id="nav_background">
			
				<ul id="navigation">
				
					
    <li class="portal24"><a href="#Beispiel"></a> 
      <ul>
        <li><a href="#Beispiel">Unser Profil</a></li>
        <li><a href="#Beispiel">IP-TV</a></li>
        <li><a href="#Beispiel">Warum IP-TV</a></li>
        <li><a href="#Beispiel">Zukunft von IP-TV</a></li>
        <li><a href="#Beispiel">Ihr Weg zu IP-TV</a></li>
      </ul>
    </li>
    <li class="produkte"><a href="#Beispiel"></a> 
      <ul>
        <li><a href="#Beispiel">Videos Publizieren</a></li>
        <li><a href="#Beispiel">IP-TV Fernsehsender</a></li>
        <li><a href="#Beispiel">Live - Stream</a></li>
        <li><a href="#Beispiel">Point of Sale</a></li>
        <li><a href="#Beispiel">Webseite und TV - Sender</a></li>
        <li><a href="#Beispiel">IP-TV Fernsehsender</a></li>
      </ul>
    </li>
	<li class="videos"><a href="#Beispiel"></a> 
      <ul>
        <li><a href="#Beispiel">Beherbergung</a></li>
        <li><a href="#Beispiel">Industrie</a></li>
        <li><a href="#Beispiel">Handel</a></li>
      </ul>
    </li>
    <li class="sender"><a href="#Beispiel"></a> 
      <ul>
        <li><a href="#Beispiel">Künstler</a></li>
        <li><a href="#Beispiel">Politik</a></li>
        <li><a href="#Beispiel">Vereine</a></li>
        <li><a href="#Beispiel">Städte u. Gemeinden</a></li>
        <li><a href="#Beispiel">Beherbergung u. Gastro</a></li>
        <li><a href="#Beispiel">Handel</a></li>
        <li><a href="#Beispiel">Industrie</a></li>
        <li><a href="#Beispiel">Dienstleistung</a></li>
        <li><a href="#Beispiel">Gesundheit</a></li>
        <li><a href="#Beispiel">Tourismus</a></li>
        <li><a href="#Beispiel">Banken u. Immobilien</a></li>
        <li><a href="#Beispiel">Entspannung u. Wellness</a></li>
        <li><a href="#Beispiel">Tierfilme</a></li>
      </ul>
    </li>
	<li class="partner"><a href="#Beispiel"></a> 
      <ul>
        <li><a href="#Beispiel">-</a></li>
        <li><a href="#Beispiel">-</a></li>
      </ul>
    </li>
				</ul>


	   </div>
	   
	   <div id="content_background">
	   	   	 
 		 
  <div id="content" class="clearfix"> 
    <div id="content_wrapper_400"> 
      <div class="wrapper_400_up"> </div>
      <div id="wrapper_400_mid"> 
        <div class="wrapper_400_text"> 
          <h2><span>Video</span></h2>
		  
          <!-- Head der HTML Seite -->
				<script type='text/javascript' src='http://www.gm1.tv/admin/public/_js/swfobject.js'></script>
				
	  		    
				
				<!-- Body der HTML Seite, dort wo der Player erscheinen soll -->
				<div id='gm1tv_content' style='padding: 10px;'>
					<strong>You need to upgrade your Flash Player</strong>
					

				</div>
				<script type='text/javascript'>
				// <![CDATA[
					
					var so = new SWFObject('http://www.gm1.tv/swf/ExternalPlayer.swf', 'GrandMedia', '365', '206', '9', '#000000');
					so.addVariable('data', '1120');
					so.addVariable('id', '397');
					so.addVariable('key', '7a992042c6134c1dab9f20e4bd9b02cf');
					so.addParam('scale');
					so.addParam('allowFullScreen', 'true');
					so.write('gm1tv_content');
					
				
				// ]]>
				</script>
          <h3><span>Hochzeitsmesse Kleider-M&uuml;ller 07.11.2009</span></h3>
        </div>
      </div>
      <div class="wrapper_400_down"> </div>
    </div>
    <div id="content_wrapper_600"> 
      <div class="wrapper_600_up"> </div>
      <div id="wrapper_600_mid"> 
        <div class="wrapper_600_text"> 
          <h2><span>Home</span></h2>
          <br />
          Test 123 <a href="">test 456 Test 123</a> test 456 <br />
          Test 123 test 456 Test 123 test 456 <br />
          Test 123 test 456 </div>
      </div>
      <div class="wrapper_600_down"> </div>
    </div>
  </div>
	   
	   </div>
	   
	   <div id="footer_background">
	   	 
		  
  <div id="footer_text"> 
    <div class="footer_shorts"> </div>
    <div class="footer_links"> <a href="">Impressum</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; 
      <a href="">Kontakt</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="">AGB</a> 
      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="">Sitemap</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; 
    </div>
  </div>
	   </div>
  </body>
</html>

Vignard · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

Den interessanten Part - nämlich die CSS-Datei - finde ich hier nicht. Ich würde mal davon ausgehen, dass das ein simples z-Index-Problem ist. Sprich dass das Menü einen niedrigeren Wert als der Container für das Video hat.

Massacre · 17.12.2009

AW: Dropdown Menü verschwindet hinter Video

Hier ist die CSS Datei

Code:

/* CSS Script Portal24.tv code by Sebastian Lutz */


/*---------------------------------------------------Main Preferences-------------------------------------------------------------------------*/
*
{
  margin: 0px auto;
  padding: 0;
}

body
{
  background: #262626;
  font-size: 12px;
  font-family:verdana, helvetica, sans_serif;
  width: 100%;
}

a
{
  color: #000000;
  text-decoration: none;
  font-weight: bold;
}

a:hover
{
  color: #c86700;
  text-decoration: underline;
  font-weight: bold;
}

a img
{
  border: none;
}

/*---------------------------------------------------Header Preferences-------------------------------------------------------------------------*/

#header_background
{
  width: 100%;
  height: 145px;
  background: url(../images/header-portal-24.png) no-repeat 0 0;
}

#head_div
{
  margin: 0px auto;
  padding: 15px 0 0 15px;
  
}

/*---------------------------------------------------Navigation Preferences-------------------------------------------------------------------------*/

#nav_background
{
  width: 100%;
  height: 36px;
  background: url(../images/nav-background.jpg) repeat-x top;
  position: relative;
}
ul#navigation 
{
	margin: 0;
	padding: 0 0 0 20px;
}
ul#navigation li
{
	list-style: none;
	float: left;
	width: 93px;
	height: 36px;
	position: relative;
	margin: 0;
	padding: 0;
	
}
ul#navigation li.portal24
{
height: 36px;
width:120px;
background: url(../images/buttons/portal-home-normal.png) no-repeat 0 0;
}
ul#navigation li.portal24:hover
{
height: 36px;
width:120px;
background: url(../images/buttons/portal-home-hover.png) no-repeat 0 0;
}
ul#navigation li.produkte
{
height: 36px;
width:120px;
background: url(../images/buttons/produkte-home-normal.png) no-repeat 0 0;
}
ul#navigation li.produkte:hover
{
height: 36px;
width:120px;
background: url(../images/buttons/produkte-home-hover.png) no-repeat 0 0;
}
ul#navigation li.videos
{
height: 36px;
width:120px;
background: url(../images/buttons/videos-home-normal.png) no-repeat 0 0;
}
ul#navigation li.videos:hover
{
height: 36px;
width:120px;
background: url(../images/buttons/videos-home-hover.png) no-repeat 0 0;
}
ul#navigation li.sender
{
height: 36px;
width:120px;
background: url(../images/buttons/sender-home-normal.png) no-repeat 0 0;
}
ul#navigation li.sender:hover
{
height: 36px;
width:120px;
background: url(../images/buttons/sender-home-hover.png) no-repeat 0 0;
}
ul#navigation li.partner
{
height: 36px;
width:120px;
background: url(../images/buttons/partner-home-normal.png) no-repeat 0 0;
}
ul#navigation li.partner:hover
{
height: 36px;
width:120px;
background: url(../images/buttons/partner-home-hover.png) no-repeat 0 0;
}

ul#navigation li ul
{
margin:0;
padding:0;
position: absolute;
top:36px;
left:0px;
}

ul#navigation li ul li
{
float:none;
display: block;
padding:1px 0 0 2px;
margin-bottom:0;
width:160px;
height:20px;
border-left: solid 1px;
border-right: solid 1px;
border-bottom: dotted 1px;
background: #ffc790;
border-color: #b35800;
font-size:7pt;
font-weight: normal;
}

ul#navigation li ul li:hover
{
background: #e39f5d;
}
ul#navigation a
{
display: block;
padding:0;
color:#000000;
text-decoration: none;
}
ul#navigation li>ul
{
display: none;
}
ul#navigation li:hover>ul
{
display: block;
}
/*  list-style-type: none;
  display: block;
  width: 93px;
  height: 36px;
  color: #ffffff;
  float: left;
  text-indent: -9999px;
  background: url(../images/buttons/button-home-hover.png) no-repeat 0 0;
*/


/*---------------------------------------------------Content Preferences-------------------------------------------------------------------------*/

#content_background h1
{

}
#content_background h1
{
  font-size: 20px;
  color: #000000;
  margin: 0px auto;
  padding: 0 0 5px 0;
  font-weight: normal;
}

#content_background h2 span
{
  font-size: 18px;
  color: #000000;
  display: block;
  margin: 0px auto;
  padding: 0 1px 0 0;
  font-weight: bold;  
  background: url(../images/line.jpg) repeat-x bottom; 
}

#content_background h3
{
 
}

#content_background h3 span
{
  font-size: 9px;
  color: #000000;
  margin: 0px auto;
  padding: 0 0 5px 0;
  font-weight: normal;
  text-decoration: underline;
}

#content span
{

}

#content p 
{
 
}

#content_background
{

}

#content
{
	postition: absolute;
	width: 100%;
	margin: 0px auto;
	padding: 20px 0 20px 20px;
}

		.clearfix:after 
		{
			content:".";
			display:block;
			height:0;
			font-size:0;
			clear:both;
			visibility:hidden;
		}
			 
		.clearfix {display:inline-block;}
			 
		/* Hides from IE-mac */
			
		* html .clearfix {height:1%;}
		.clearfix {display:block;}
		/* End hide from IE-mac */

#content_wrapper_400
{
	
	width: 400px;
	height: 100%;
	float:left;
	margin: 10px 0 0 0;
	padding: 0px
	
}

		.wrapper_400_up
		{
		  width: 400px;
		  height: 5px;
		  background: url(../images/wrapper-400-up.png) no-repeat 0 0;
		}
		
#wrapper_400_mid
{
  width: 400px;
  margin: 0 auto;
  background: #ffffff;
}

		.wrapper_400_text
		{
		  width: 390px;
		  margin: 0px auto;
		  padding: 1px 0 0 0 ; 
		  text-align: center;
		}


		.wrapper_400_down
		{
		  width: 400px;
		  height: 5px;
		  background: url(../images/wrapper-400-down.png) no-repeat 0 0;
		}


#content_wrapper_600
{
	
	width: 600px;
	height: 100%;
	float: left;
	margin: 10px 0 0 1px;
}

		.wrapper_600_up
		{
		  width: 600px;
		  height: 5px;
		  background: url(../images/wrapper-600-up.png);
		}
		
#wrapper_600_mid
{
  width: 600px;
  margin: 0 auto;
  background: #ffffff;
}

		.wrapper_600_text
		{
		  
		  width: 590px;
		  margin: 0px auto; 
		  padding: 4px 4px 4px 4px;
		}		
				
				
		.wrapper_600_down
		{
		  
		  width: 600px;
		  height: 5px;
		  background: url(../images/wrapper-600-down.png);
		}


/*---------------------------------------------------Footer Preferences-------------------------------------------------------------------------*/

#footer_background
{
  width: 100%;
  height: 100%;
  color: #ffffff;
  background: #717171; 
  margin: 0px auto;
}

#footer_text
{
	position: relative;
	width: 100%;
	margin:0px auto;
	padding: 10px 0px 0px 0px;
}
#footer_text a
		
{
	color: #e3e3e3;
}
				
#footer_text a:hover
{
	color: #c86700;
}


		.footer_shorts
		{
			width: 100%;
			text-align: center;
		}
		
		.footer_links
		{
			background: white;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			text-align: right;
			margin-top: 30px;
			padding: 5px 0 0 0;
			background: url(../images/kontakt-bg.png) repeat-x top;
		}

Daviot · 18.12.2009

AW: Dropdown Menü verschwindet hinter Video

Hallo,
gib dem Flash-Video mal die Parameter

Code:

...
so.addParam('allowFullScreen', 'true');
[b]so.addParam('wmode', 'opaque');[/b]
so.write('gm1tv_content');
...

bei mir hat auch der Parameter wmode mit transparent funktioniert.

Massacre · 18.12.2009

AW: Dropdown Menü verschwindet hinter Video

Daviot schrieb:
Hallo,
gib dem Flash-Video mal die Parameter

Code:

... so.addParam('allowFullScreen', 'true'); [b]so.addParam('wmode', 'opaque');[/b] so.write('gm1tv_content'); ...

bei mir hat auch der Parameter wmode mit transparent funktioniert.

das hat funktioniert ich danke Dir und euch

ihr seit meine Retter ^^ ganz anderes wie in einem anderen forum wo man nur dumm runtergemacht wird.