Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nie działa wmode="transparent"
Forum PHP.pl > Forum > Po stronie przeglądarki
kbilski
15.10.2011, 16:16:35
Witam

Mam problem że menu chowa się pod obiektem flash w CSSie.
Użyłem wmode="transparent" w parametrach flash, próbowałem też z-index w CSSie jednak efekt nadal jest taki..

http://interfoto360.pl/1/galeria.html

Problem tylko w IE oraz chrome. Mozilla działa.

Ktoś wie o co chodzi?

Kod jest prosty:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> 
  5. 	<title>Virtual Tour generated by Panotour</title>
  6. 	<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  7. 	<meta name="apple-mobile-web-app-capable" content="yes"/>
  8.         <style type="text/css">
  9.             * {
  10.                 padding: 0;
  11.                 margin: 0;
  12.             }
  13.             html, body {
  14.                 height: 100%;
  15.             }
  16.  
  17. 			html {
  18. background: url(http://www.msplus.vel.pl/images/sz57/tlo_main.jpg) repeat-y;
  19. }
  20.  
  21. #content
  22. {
  23. 	height: 577px;
  24. 	margin: 0 auto;
  25. 	width: 1200px;	
  26. }
  27.  
  28. #header {
  29. 	height: 250px;
  30. 	text-align: right;
  31. 	background: url(http://interfoto360.pl/top/topgal1.jpg) no-repeat;	
  32. 	margin-top:30px;
  33. }
  34. #tresc
  35. {
  36. 	height: 550px;
  37. 	margin: 0 auto;
  38. 	width: 1200px;
  39. 	text-align: left;
  40. 	background: url(http://www.msplus.vel.pl/images/sz57/tlo.jpg) repeat-y;
  41. 	padding-left:3px;
  42. 	padding-top:0px;
  43. }
  44. div#okna{
  45.   margin: 0px auto;
  46.   width: 980px;
  47.   background: white;
  48.   margin-top: 8px;
  49.   padding-top: 8px;
  50. }
  51.  
  52. div.tekst{
  53.   vertical-align: top;
  54.   float: left;
  55.   width: 25%;
  56.   font-size: 13px;
  57.   color: #464646;
  58.   margin-top: 40px;
  59. }
  60.  
  61. div.tekst div{
  62.   padding: 10px 10px 20px 10px;
  63. }
  64.  
  65. div.tekst div#t_1{
  66.   padding: 10px 15px 20px 5px; 
  67.   margin-left: 50px;
  68. }
  69.  
  70. div.tekst div#t_2{
  71.   padding: 10px 10px 20px 10px;
  72.   margin-left: 50px;
  73. }
  74.  
  75. div.tekst div#t_3{
  76.   padding: 10px 20px 0px 5px;
  77.   margin-left: 50px;
  78. }
  79. p.tekst1 {    
  80.   color: #fff;
  81.    font-family: Calibri;
  82. font-size: 14px;
  83. font-weight: bold; 
  84. margin-top: 50px;
  85. }
  86. p.tekst2 {    
  87.   color: #fff;
  88.    font-family: Calibri;
  89. font-size: 24px;
  90. font-weight: bold;
  91. }
  92. p.tekst3 {    
  93.   color: #fff;
  94.   font-family: "Adobe Caslon Pro Bold";
  95. font-size: 20px;
  96. font-style: italic;
  97. font-weight: bold;
  98. }
  99. p.tekst4 {    
  100.   color: #fff;
  101.   font-family: Calibri;
  102. font-size: 16px;
  103. font-style: normal;
  104. font-weight: normal;
  105. }
  106.  
  107. * {
  108. padding: 0;
  109. margin: 0
  110. }
  111. body {
  112. behavior:url(\"csshover2.htc\")
  113. }
  114. #menu {
  115. position: absolute;
  116. list-style-type: none;
  117. margin-top: 250px;
  118. z-index:100;
  119. }
  120. #menu ul {
  121. list-style-type: none;
  122. z-index:100;
  123. }
  124. #menu li {
  125. float: left;
  126. z-index:100;
  127. }
  128. #menu li li {
  129. float: none;
  130. z-index:100;
  131. }
  132. #menu li a {
  133. display: block;
  134. width: 200px;
  135. height:auto;
  136. text-align: center;
  137. background: url(http://www.msplus.vel.pl/images/sz57/button1.jpg) no-repeat;
  138. color: #fff;
  139. padding: 3px 0;
  140. text-decoration: none;
  141. font-weight: bold; 
  142. font-family: Calibri;
  143. font-size: 18px;
  144. z-index:100;
  145. }
  146.  
  147. #menu li a:hover {
  148. background: #CDCECF;
  149. color: #000;
  150. text-decoration: none;
  151. z-index:100;
  152. }
  153. #menu li ul {
  154. position: absolute;
  155. height: 1px;
  156. overflow:hidden;
  157. z-index:100;
  158. }
  159.  
  160. #menu li:hover ul {
  161. height:200px;
  162. z-index:100;
  163. }
  164. #runningtext{
  165. color: #fff;
  166. margin-top:373px;
  167. font-family: "Calibri";
  168. font-size: 18px;
  169.  
  170. }
  171.         </style>
  172. </head>
  173. <body>
  174. <DIV id=content>
  175. <DIV id=header>
  176.  
  177.  
  178.  
  179.  
  180.  
  181. <ul id=menu>
  182. <li><a href="http://interfoto360.pl/index.html">Strona Glówna</a>
  183.      <ul class=\"zero\">     
  184.      </ul>
  185.     <li><a href="http://interfoto360.pl/misja/misja_i_zalozenia.html">O Nas</a>
  186.      <ul class=\"one\">
  187.      <li><a href="http://interfoto360.pl/misja/misja_i_zalozenia.html">Misja i zalozenia firmy</a></li>
  188.      <li><a href="http://interfoto360.pl/cooferujemy/co_oferujemy.html">Co oferujemy?</a></li>
  189.      </ul>
  190.     </li>
  191.     <li><a href="http://interfoto360.pl/gmin_i_miast/oferta_dla_gmin_i_miast.html">Oferty Dedykowane</a>
  192.      <ul id=\"two\">
  193.  <li><a href="http://interfoto360.pl/gmin_i_miast/oferta_dla_gmin_i_miast.html">Dla Miast i Gmin</a></li>
  194.      <li><a href="http://interfoto360.pl/dlafirm/oferta_dla_firm.html">Dla Firm</a></li>
  195.      <li><a href="http://interfoto360.pl/dladew/oferta_dla_deweloperow.html">Dla Deweloperów</a></li>
  196.      <li><a href="http://interfoto360.pl/indywidualni/oferta_dla_indy.html">Klienci Indywidualni</a></li>
  197.      </ul>
  198.     </li>
  199.     <li><a href="http://interfoto360.pl/1/galeria.html">Portfolio</a>
  200.      <ul id=\"three\">
  201.      <li><a href="http://interfoto360.pl/1/galeria.html">Panoramy Sferyczne</a></li>
  202.      <li><a href=\"\">Fotografia tradycyjna 2D</a></li>
  203.      <li><a href=\"\">Wycieczki wirtualne</a></li>
  204.      <li><a href=\"\">Zdjecia 3D przedmiotów</a></li>
  205.      </ul>
  206.     </li>
  207.     <li><a href="http://interfoto360.pl/form_gminy.php">Formularz zamówien</a>
  208.      <ul id=\"four\">
  209.      <li><a href="http://interfoto360.pl/form_gminy.php">Miasta, Miejscowosci, Gminy</a></li>
  210.      <li><a href="http://interfoto360.pl/form_firmy_fotografia_przedmiotów.php">Firmy - Fotografia Przedmiotów</a></li>
  211. 	      <li><a href="http://interfoto360.pl/form_firmy_wirtualne_wycieczki.php">Firmy - Wirtualne Wycieczki</a></li>
  212.      <li><a href="http://interfoto360.pl/form_deweloperzy.php">Deweloperzy</a></li>
  213.      <li><a href="http://interfoto360.pl/form.php">Klienci indywidualni</a></li>
  214.      </ul>
  215.     </li>
  216.     <li><a href="http://interfoto360.pl/kontakt.html">Kontakt</a>
  217.      <ul id=\"five\">
  218.      <li><a href="http://interfoto360.pl/kontakt.html">Dane Kontaktowe</a></li>
  219. 	 <li><a href="http://interfoto360.pl/chat.html">Zapytaj ON-LINE</a></li>
  220.      </ul>
  221.     </li>
  222. </ul>
  223. </DIV>
  224. <DIV id=tresc>
  225. <center><p class="tekst2">GALERIA</p></center>
  226. 	<table><tr><td><script src="swfobject/swfkrpano.js"></script>
  227.             <p class="tekst1">Project : 15000x7500pics</p>
  228.             <div id="panoDIV" style="width:395px; height:200px;">
  229.                     <script>
  230.                     embedpano({target:"panoDIV",swf:"15000x7500pics.swf",width:"100%",height:"100%",allowFullScreen:"true"});
  231.                     </script>
  232.                     <noscript>
  233.                             <div id="tour">
  234.                                     <object width="100%" height="100%">
  235.                                             <embed src="15000x7500pics.swf" width="130%" height="100%" allowFullScreen="true" wmode="transparent">
  236.                                             </embed>
  237.                                     </object>
  238.                             </div>
  239.                     </noscript>
  240.             </div>
  241. 	</td><td>
  242. 		<script src="swfobject/swfkrpano2.js"></script>
  243.  
  244.             <p class="tekst1">Project : 15000x7500pics</p>
  245.             <div id="panoDIV2" style="width:395px; height:200px;">
  246.                     <script>
  247.                     embedpano({target:"panoDIV2",swf:"1.swf",width:"100%",height:"100%",allowFullScreen:"true"});
  248.                     </script>
  249.                     <noscript>
  250.                             <div id="tour">
  251.                                     <object width="100%" height="100%">
  252.                                             <embed src="1.swf" width="100%" height="100%" allowFullScreen="true" wmode="transparent" name="wmode" value="opaque">
  253.                                             </embed>
  254.  
  255.                                     </object>
  256.                             </div>
  257.                     </noscript>
  258.             </div>
  259.  
  260. 		</td><td>
  261. 		<script src="swfobject/swfkrpano3.js"></script>
  262.  
  263.             <p class="tekst1">Project : 15000x7500pics</p>
  264.             <div id="panoDIV3" style="width:395px; height:200px;">
  265.                     <script>
  266.                     embedpano({target:"panoDIV3",swf:"3.swf",width:"100%",height:"100%",allowFullScreen:"true"});
  267.                     </script>
  268.                     <noscript>
  269.                             <div id="tour">
  270.                                     <object width="100%" height="100%">
  271.                                             <embed src="3.swf" width="100%" height="100%" allowFullScreen="true" wmode="transparent">
  272.                                             </embed>
  273.                                     </object>
  274.                             </div>
  275.                     </noscript>
  276.             </div>
  277.         </td></tr></table>
  278. </body>
  279. </html>
  280.  
[HTML] pobierz, plaintext
wookieb
15.10.2011, 17:44:34
Wstawisz flasha javascriptem ORAZ w sekcji noscript. Zadbaj o dodanie parametru wmode w javascriptcie również.
Strzelam, że będzie wyglądać to tak
[JAVASCRIPT] pobierz, plaintext 
  1. embedpano({target:"panoDIV",swf:"15000x7500pics.swf",width:"100%",height:"100%",allowFullScreen:"true", wmode: "opaque"});
[JAVASCRIPT] pobierz, plaintext


Poza tym nie wmode="transparent" tylko wystarczy wmode="opaque"
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.