Проблема такого плана, на сайте есть горизонтальное выпадающее CSS - меню и ролик с ютуба. При открытии пункта меню, оно попадает под ролик и становится недоступным. Как сделать так, чтобы отображение меню было поверх проигрывателя... Z-index совсем не помогает, в интернете описания не нашел!
вот пример HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Горизонтальное выпадающее меню на CSS</title> <link rel="stylesheet" href="http://jemand.ru/examples/template-example/style.css" type="text/css" /> <style> #menu{ list-style:none; padding:0; margin:0; font-size: 100%; font-family: Georgia; } #menu li{ float:left; height:33px; padding:0; margin:0; width:150px; text-align:center; background:#171717; position:relative; padding-top: 12px; } #menu li ul{ list-style:none; padding:0; margin:0; width:150px; display:none; position:absolute; left:0; top:45px; } #menu li ul li{ float:none; height:33px; margin:0; width:150px; text-align:center; background:#7F7F7F; } #menu li a{ display:block; width:150px; height:33px; color: #fff; text-decoration: none; } #menu li:hover ul, #menu li.jshover ul{ display:block; } #menu li:hover, #menu li.jshover{ background:#424242; } .back { width:100%; background:#171717; height: 45px; } </style> <script> jsHover = function() { var hEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0, len=hEls.length; i<len; i++) { hEls[i].onmouseover=function() { this.className+=" jshover"; } hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } } } if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover); </script> </head> <body> <!-- Заголовок всегда ссылка на саму статью! --> <div id="wrap"> <div id="headline"> <a href="http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/">Горизонтальное выпадающее меню на CSS</a> </div> <div id="content" class="clearfix"> <div class="back"> <ul id="menu"> <li><a href="#">Пункт №1</a></li> <li> <a href="#">Пункт №2</a> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3</a></li> </ul> </li> <li> <a href="#">Пункт №3</a> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3</a></li> <li><a href="#">Подпункт №4</a></li> <li><a href="#">Подпункт №5</a></li> </ul> </li> <li> <a href="#">Пункт №4</a> <ul> <li><a href="#">Подпункт №1</a></li> </ul> </li> <li> <a href="#">Пункт №5</a> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3</a></li> <li><a href="#">Подпункт №4</a></li> <li><a href="#">Подпункт №5</a></li> </ul> </li> </ul> </div> </div> <object width="640" height="480"> <param name="movie" value="http://www.youtube.com/v/n0abF94ownM?version=3&hl=ru_RU"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="opaque" /> <embed src="http://www.youtube.com/v/n0abF94ownM?version=3&hl=ru_RU" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"></embed></object> <div> </body> </html> Как ролик ютуба сделать ниже CSS меню???
Раз: http://lmgtfy.com/?q=div+over+flash Два: http://habrahabr.ru/tag/div%20поверх%20flash/ Три: http://habrahabr.ru/blogs/webdev/50334/#habracut
topas для простого контента этот способ подходит, только для всплывающего меню почему-то не выходит, пункты меню все равно располагаются ниже видеоролика ютуба.
topas способ работает, но, теперь видеоролик просто превращается в картинку, и становится неактивным. Просмотр видео следовательно уже невозможен :-(
Все разобрался... Вот рабочий пример, вдруг кому пригодится: HTML: <div style="z-index: 9; width:420px; height:315px;"> <object type='application/x-shockwave-flash' data='http://www.youtube.com/v/3HayFyMoN68?version=3&hl=ru_RU&rel=0' width='420' height='315'> <param name='movie' value='http://www.youtube.com/v/3HayFyMoN68?version=3&hl=ru_RU&rel=0' /> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="opaque"/> <param name='quality' value='high' /><param name='bgcolor' value='#fdfdfd' /> <param name='play' value='true' /><param name='loop' value='true' /> <param name='scale' value='showall' /> <param name='menu' value='false' /><param name='devicefont' value='false' /> <param name='salign' value='' /> <embed src="http://www.youtube.com/v/3HayFyMoN68?version=3&hl=ru_RU&rel=0" menu=false wmode="opaque" quality=high bgcolor=#FFFFFF swLiveConnect=FALSE WIDTH=420 HEIGHT=315 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" ></embed> </object> </div>