Anzeige

Dropdown Menü verschwindet hinter Video

Dropdown Menü verschwindet hinter Video | PSD-Tutorials.de

Erstellt von Massacre, 17.12.2009.

  1. Massacre

    Massacre Nicht mehr ganz neu hier

    Dabei seit:
    12.09.2005
    Beiträge:
    56
    Geschlecht:
    männlich
    Software:
    Cinema 4D, GIMP, HTML, CSS,
    Dropdown Menü verschwindet hinter Video
    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???

    [​IMG]
     
    #1      
  2. noxhirsch

    noxhirsch Nico Hirsch

    Dabei seit:
    20.11.2008
    Beiträge:
    142
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS C300
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    Das liegt an Flash, weil sich flash immer in den Vordergrund drängt
     
    #2      
  3. Massacre

    Massacre Nicht mehr ganz neu hier

    Dabei seit:
    12.09.2005
    Beiträge:
    56
    Geschlecht:
    männlich
    Software:
    Cinema 4D, GIMP, HTML, CSS,
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    bekomme ich das irgendwie unterbunden ?
     
    #3      
  4. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    Du kannst das Problem mit "WMODE="TRANSPARENT" fixen.
     
    #4      
  5. Massacre

    Massacre Nicht mehr ganz neu hier

    Dabei seit:
    12.09.2005
    Beiträge:
    56
    Geschlecht:
    männlich
    Software:
    Cinema 4D, GIMP, HTML, CSS,
    Dropdown Menü verschwindet hinter Video
    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 (Text):
    1.  
    2. <?xml version="1.0" encoding="UTF-8"?>
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml">
    5.   <head>
    6.        <title>Portal24.tv Entertainment Multimedial</title>
    7.        <meta name="author" content="Sebastian Lutz" />
    8.        <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    9.          
    10.   </head>
    11.   <body>
    12.        <div id="header_background">
    13.        
    14.                
    15.        </div>
    16.        
    17.        <div id="nav_background">
    18.            
    19.                 <ul id="navigation">
    20.                
    21.                    
    22.     <li class="portal24"><a href="#Beispiel"></a>
    23.       <ul>
    24.         <li><a href="#Beispiel">Unser Profil</a></li>
    25.         <li><a href="#Beispiel">IP-TV</a></li>
    26.         <li><a href="#Beispiel">Warum IP-TV</a></li>
    27.         <li><a href="#Beispiel">Zukunft von IP-TV</a></li>
    28.         <li><a href="#Beispiel">Ihr Weg zu IP-TV</a></li>
    29.       </ul>
    30.     </li>
    31.     <li class="produkte"><a href="#Beispiel"></a>
    32.       <ul>
    33.         <li><a href="#Beispiel">Videos Publizieren</a></li>
    34.         <li><a href="#Beispiel">IP-TV Fernsehsender</a></li>
    35.         <li><a href="#Beispiel">Live - Stream</a></li>
    36.         <li><a href="#Beispiel">Point of Sale</a></li>
    37.         <li><a href="#Beispiel">Webseite und TV - Sender</a></li>
    38.         <li><a href="#Beispiel">IP-TV Fernsehsender</a></li>
    39.       </ul>
    40.     </li>
    41.     <li class="videos"><a href="#Beispiel"></a>
    42.       <ul>
    43.         <li><a href="#Beispiel">Beherbergung</a></li>
    44.         <li><a href="#Beispiel">Industrie</a></li>
    45.         <li><a href="#Beispiel">Handel</a></li>
    46.       </ul>
    47.     </li>
    48.     <li class="sender"><a href="#Beispiel"></a>
    49.       <ul>
    50.         <li><a href="#Beispiel">Künstler</a></li>
    51.         <li><a href="#Beispiel">Politik</a></li>
    52.         <li><a href="#Beispiel">Vereine</a></li>
    53.         <li><a href="#Beispiel">Städte u. Gemeinden</a></li>
    54.         <li><a href="#Beispiel">Beherbergung u. Gastro</a></li>
    55.         <li><a href="#Beispiel">Handel</a></li>
    56.         <li><a href="#Beispiel">Industrie</a></li>
    57.         <li><a href="#Beispiel">Dienstleistung</a></li>
    58.         <li><a href="#Beispiel">Gesundheit</a></li>
    59.         <li><a href="#Beispiel">Tourismus</a></li>
    60.         <li><a href="#Beispiel">Banken u. Immobilien</a></li>
    61.         <li><a href="#Beispiel">Entspannung u. Wellness</a></li>
    62.         <li><a href="#Beispiel">Tierfilme</a></li>
    63.       </ul>
    64.     </li>
    65.     <li class="partner"><a href="#Beispiel"></a>
    66.       <ul>
    67.         <li><a href="#Beispiel">-</a></li>
    68.         <li><a href="#Beispiel">-</a></li>
    69.       </ul>
    70.     </li>
    71.                 </ul>
    72.  
    73.  
    74.        </div>
    75.        
    76.        <div id="content_background">
    77.              
    78.          
    79.   <div id="content" class="clearfix">
    80.     <div id="content_wrapper_400">
    81.       <div class="wrapper_400_up"> </div>
    82.       <div id="wrapper_400_mid">
    83.         <div class="wrapper_400_text">
    84.           <h2><span>Video</span></h2>
    85.          
    86.           <!-- Head der HTML Seite -->
    87.                 <script type='text/javascript' src='http://www.gm1.tv/admin/public/_js/swfobject.js'></script>
    88.                
    89.                
    90.                
    91.                 <!-- Body der HTML Seite, dort wo der Player erscheinen soll -->
    92.                 <div id='gm1tv_content' style='padding: 10px;'>
    93.                     <strong>You need to upgrade your Flash Player</strong>
    94.                    
    95.  
    96.                 </div>
    97.                 <script type='text/javascript'>
    98.                 // <![CDATA[
    99.                    
    100.                     var so = new SWFObject('http://www.gm1.tv/swf/ExternalPlayer.swf', 'GrandMedia', '365', '206', '9', '#000000');
    101.                     so.addVariable('data', '1120');
    102.                     so.addVariable('id', '397');
    103.                     so.addVariable('key', '7a992042c6134c1dab9f20e4bd9b02cf');
    104.                     so.addParam('scale');
    105.                     so.addParam('allowFullScreen', 'true');
    106.                     so.write('gm1tv_content');
    107.                    
    108.                
    109.                 // ]]>
    110.                 </script>
    111.           <h3><span>Hochzeitsmesse Kleider-M&uuml;ller 07.11.2009</span></h3>
    112.         </div>
    113.       </div>
    114.       <div class="wrapper_400_down"> </div>
    115.     </div>
    116.     <div id="content_wrapper_600">
    117.       <div class="wrapper_600_up"> </div>
    118.       <div id="wrapper_600_mid">
    119.         <div class="wrapper_600_text">
    120.           <h2><span>Home</span></h2>
    121.           <br />
    122.           Test 123 <a href="">test 456 Test 123</a> test 456 <br />
    123.           Test 123 test 456 Test 123 test 456 <br />
    124.           Test 123 test 456 </div>
    125.       </div>
    126.       <div class="wrapper_600_down"> </div>
    127.     </div>
    128.   </div>
    129.        
    130.        </div>
    131.        
    132.        <div id="footer_background">
    133.          
    134.          
    135.   <div id="footer_text">
    136.     <div class="footer_shorts"> </div>
    137.     <div class="footer_links"> <a href="">Impressum</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    138.       <a href="">Kontakt</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="">AGB</a>
    139.       &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="">Sitemap</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    140.     </div>
    141.   </div>
    142.        </div>
    143.   </body>
    144. </html>
    145.  
     
    Zuletzt bearbeitet: 17.12.2009
    #5      
  6. Vignard

    Vignard Guest

    Dropdown Menü verschwindet hinter Video
    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.
     
    #6      
  7. Massacre

    Massacre Nicht mehr ganz neu hier

    Dabei seit:
    12.09.2005
    Beiträge:
    56
    Geschlecht:
    männlich
    Software:
    Cinema 4D, GIMP, HTML, CSS,
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    Hier ist die CSS Datei

    Code (Text):
    1.  
    2. /* CSS Script Portal24.tv code by Sebastian Lutz */
    3.  
    4.  
    5. /*---------------------------------------------------Main Preferences-------------------------------------------------------------------------*/
    6. *
    7. {
    8.   margin: 0px auto;
    9.   padding: 0;
    10. }
    11.  
    12. body
    13. {
    14.   background: #262626;
    15.   font-size: 12px;
    16.   font-family:verdana, helvetica, sans_serif;
    17.   width: 100%;
    18. }
    19.  
    20. a
    21. {
    22.   color: #000000;
    23.   text-decoration: none;
    24.   font-weight: bold;
    25. }
    26.  
    27. a:hover
    28. {
    29.   color: #c86700;
    30.   text-decoration: underline;
    31.   font-weight: bold;
    32. }
    33.  
    34. a img
    35. {
    36.   border: none;
    37. }
    38.  
    39. /*---------------------------------------------------Header Preferences-------------------------------------------------------------------------*/
    40.  
    41. #header_background
    42. {
    43.   width: 100%;
    44.   height: 145px;
    45.   background: url(../images/header-portal-24.png) no-repeat 0 0;
    46. }
    47.  
    48. #head_div
    49. {
    50.   margin: 0px auto;
    51.   padding: 15px 0 0 15px;
    52.  
    53. }
    54.  
    55. /*---------------------------------------------------Navigation Preferences-------------------------------------------------------------------------*/
    56.  
    57. #nav_background
    58. {
    59.   width: 100%;
    60.   height: 36px;
    61.   background: url(../images/nav-background.jpg) repeat-x top;
    62.   position: relative;
    63. }
    64. ul#navigation
    65. {
    66.     margin: 0;
    67.     padding: 0 0 0 20px;
    68. }
    69. ul#navigation li
    70. {
    71.     list-style: none;
    72.     float: left;
    73.     width: 93px;
    74.     height: 36px;
    75.     position: relative;
    76.     margin: 0;
    77.     padding: 0;
    78.    
    79. }
    80. ul#navigation li.portal24
    81. {
    82. height: 36px;
    83. width:120px;
    84. background: url(../images/buttons/portal-home-normal.png) no-repeat 0 0;
    85. }
    86. ul#navigation li.portal24:hover
    87. {
    88. height: 36px;
    89. width:120px;
    90. background: url(../images/buttons/portal-home-hover.png) no-repeat 0 0;
    91. }
    92. ul#navigation li.produkte
    93. {
    94. height: 36px;
    95. width:120px;
    96. background: url(../images/buttons/produkte-home-normal.png) no-repeat 0 0;
    97. }
    98. ul#navigation li.produkte:hover
    99. {
    100. height: 36px;
    101. width:120px;
    102. background: url(../images/buttons/produkte-home-hover.png) no-repeat 0 0;
    103. }
    104. ul#navigation li.videos
    105. {
    106. height: 36px;
    107. width:120px;
    108. background: url(../images/buttons/videos-home-normal.png) no-repeat 0 0;
    109. }
    110. ul#navigation li.videos:hover
    111. {
    112. height: 36px;
    113. width:120px;
    114. background: url(../images/buttons/videos-home-hover.png) no-repeat 0 0;
    115. }
    116. ul#navigation li.sender
    117. {
    118. height: 36px;
    119. width:120px;
    120. background: url(../images/buttons/sender-home-normal.png) no-repeat 0 0;
    121. }
    122. ul#navigation li.sender:hover
    123. {
    124. height: 36px;
    125. width:120px;
    126. background: url(../images/buttons/sender-home-hover.png) no-repeat 0 0;
    127. }
    128. ul#navigation li.partner
    129. {
    130. height: 36px;
    131. width:120px;
    132. background: url(../images/buttons/partner-home-normal.png) no-repeat 0 0;
    133. }
    134. ul#navigation li.partner:hover
    135. {
    136. height: 36px;
    137. width:120px;
    138. background: url(../images/buttons/partner-home-hover.png) no-repeat 0 0;
    139. }
    140.  
    141. ul#navigation li ul
    142. {
    143. margin:0;
    144. padding:0;
    145. position: absolute;
    146. top:36px;
    147. left:0px;
    148. }
    149.  
    150. ul#navigation li ul li
    151. {
    152. float:none;
    153. display: block;
    154. padding:1px 0 0 2px;
    155. margin-bottom:0;
    156. width:160px;
    157. height:20px;
    158. border-left: solid 1px;
    159. border-right: solid 1px;
    160. border-bottom: dotted 1px;
    161. background: #ffc790;
    162. border-color: #b35800;
    163. font-size:7pt;
    164. font-weight: normal;
    165. }
    166.  
    167. ul#navigation li ul li:hover
    168. {
    169. background: #e39f5d;
    170. }
    171. ul#navigation a
    172. {
    173. display: block;
    174. padding:0;
    175. color:#000000;
    176. text-decoration: none;
    177. }
    178. ul#navigation li>ul
    179. {
    180. display: none;
    181. }
    182. ul#navigation li:hover>ul
    183. {
    184. display: block;
    185. }
    186. /*  list-style-type: none;
    187.   display: block;
    188.   width: 93px;
    189.   height: 36px;
    190.   color: #ffffff;
    191.   float: left;
    192.   text-indent: -9999px;
    193.   background: url(../images/buttons/button-home-hover.png) no-repeat 0 0;
    194. */
    195.  
    196.  
    197. /*---------------------------------------------------Content Preferences-------------------------------------------------------------------------*/
    198.  
    199. #content_background h1
    200. {
    201.  
    202. }
    203. #content_background h1
    204. {
    205.   font-size: 20px;
    206.   color: #000000;
    207.   margin: 0px auto;
    208.   padding: 0 0 5px 0;
    209.   font-weight: normal;
    210. }
    211.  
    212. #content_background h2 span
    213. {
    214.   font-size: 18px;
    215.   color: #000000;
    216.   display: block;
    217.   margin: 0px auto;
    218.   padding: 0 1px 0 0;
    219.   font-weight: bold;  
    220.   background: url(../images/line.jpg) repeat-x bottom;
    221. }
    222.  
    223. #content_background h3
    224. {
    225.  
    226. }
    227.  
    228. #content_background h3 span
    229. {
    230.   font-size: 9px;
    231.   color: #000000;
    232.   margin: 0px auto;
    233.   padding: 0 0 5px 0;
    234.   font-weight: normal;
    235.   text-decoration: underline;
    236. }
    237.  
    238. #content span
    239. {
    240.  
    241. }
    242.  
    243. #content p
    244. {
    245.  
    246. }
    247.  
    248. #content_background
    249. {
    250.  
    251. }
    252.  
    253. #content
    254. {
    255.     postition: absolute;
    256.     width: 100%;
    257.     margin: 0px auto;
    258.     padding: 20px 0 20px 20px;
    259. }
    260.  
    261.         .clearfix:after
    262.         {
    263.             content:".";
    264.             display:block;
    265.             height:0;
    266.             font-size:0;
    267.             clear:both;
    268.             visibility:hidden;
    269.         }
    270.              
    271.         .clearfix {display:inline-block;}
    272.              
    273.         /* Hides from IE-mac */
    274.            
    275.         * html .clearfix {height:1%;}
    276.         .clearfix {display:block;}
    277.         /* End hide from IE-mac */
    278.  
    279. #content_wrapper_400
    280. {
    281.    
    282.     width: 400px;
    283.     height: 100%;
    284.     float:left;
    285.     margin: 10px 0 0 0;
    286.     padding: 0px
    287.    
    288. }
    289.  
    290.         .wrapper_400_up
    291.         {
    292.           width: 400px;
    293.           height: 5px;
    294.           background: url(../images/wrapper-400-up.png) no-repeat 0 0;
    295.         }
    296.        
    297. #wrapper_400_mid
    298. {
    299.   width: 400px;
    300.   margin: 0 auto;
    301.   background: #ffffff;
    302. }
    303.  
    304.         .wrapper_400_text
    305.         {
    306.           width: 390px;
    307.           margin: 0px auto;
    308.           padding: 1px 0 0 0 ;
    309.           text-align: center;
    310.         }
    311.  
    312.  
    313.         .wrapper_400_down
    314.         {
    315.           width: 400px;
    316.           height: 5px;
    317.           background: url(../images/wrapper-400-down.png) no-repeat 0 0;
    318.         }
    319.  
    320.  
    321. #content_wrapper_600
    322. {
    323.    
    324.     width: 600px;
    325.     height: 100%;
    326.     float: left;
    327.     margin: 10px 0 0 1px;
    328. }
    329.  
    330.         .wrapper_600_up
    331.         {
    332.           width: 600px;
    333.           height: 5px;
    334.           background: url(../images/wrapper-600-up.png);
    335.         }
    336.        
    337. #wrapper_600_mid
    338. {
    339.   width: 600px;
    340.   margin: 0 auto;
    341.   background: #ffffff;
    342. }
    343.  
    344.         .wrapper_600_text
    345.         {
    346.          
    347.           width: 590px;
    348.           margin: 0px auto;
    349.           padding: 4px 4px 4px 4px;
    350.         }      
    351.                
    352.                
    353.         .wrapper_600_down
    354.         {
    355.          
    356.           width: 600px;
    357.           height: 5px;
    358.           background: url(../images/wrapper-600-down.png);
    359.         }
    360.  
    361.  
    362. /*---------------------------------------------------Footer Preferences-------------------------------------------------------------------------*/
    363.  
    364. #footer_background
    365. {
    366.   width: 100%;
    367.   height: 100%;
    368.   color: #ffffff;
    369.   background: #717171;
    370.   margin: 0px auto;
    371. }
    372.  
    373. #footer_text
    374. {
    375.     position: relative;
    376.     width: 100%;
    377.     margin:0px auto;
    378.     padding: 10px 0px 0px 0px;
    379. }
    380. #footer_text a
    381.        
    382. {
    383.     color: #e3e3e3;
    384. }
    385.                
    386. #footer_text a:hover
    387. {
    388.     color: #c86700;
    389. }
    390.  
    391.  
    392.         .footer_shorts
    393.         {
    394.             width: 100%;
    395.             text-align: center;
    396.         }
    397.        
    398.         .footer_links
    399.         {
    400.             background: white;
    401.             width: 100%;
    402.             height: 25px;
    403.             font-size: 9px;
    404.             font-weight: bold;
    405.             text-align: right;
    406.             margin-top: 30px;
    407.             padding: 5px 0 0 0;
    408.             background: url(../images/kontakt-bg.png) repeat-x top;
    409.         }
    410.  
    411.  
     
    #7      
  8. Daviot

    Daviot Noch nicht viel geschrieben

    Dabei seit:
    23.06.2006
    Beiträge:
    14
    Geschlecht:
    männlich
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    Hallo,
    gib dem Flash-Video mal die Parameter
    Code (Text):
    1.  
    2. ...
    3. so.addParam('allowFullScreen', 'true');
    4. [b]so.addParam('wmode', 'opaque');[/b]
    5. so.write('gm1tv_content');
    6. ...
    bei mir hat auch der Parameter wmode mit transparent funktioniert.
     
    #8      
  9. Massacre

    Massacre Nicht mehr ganz neu hier

    Dabei seit:
    12.09.2005
    Beiträge:
    56
    Geschlecht:
    männlich
    Software:
    Cinema 4D, GIMP, HTML, CSS,
    Dropdown Menü verschwindet hinter Video
    AW: Dropdown Menü verschwindet hinter Video

    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.
     
    #9      
x
×
×