Ziggy Stardust
-
Posts
4 -
Joined
-
Last visited
Ziggy Stardust's Achievements
Explorer (1/14)
0
Reputation
-
выпадающее меню на CSS и полупрозрачный фон
Ziggy Stardust replied to Ziggy Stardust's question in HTML Coding
Мнда... Почитал про полупрозрачность в PNG для ИЕ5 и 6. Похоже в моем случае без задания явной ширины блокам не обойтись. :-(Все равно в ИЕ не получается отображение меню так же как в мозилле/опере. Когда задаю: .topnav LI UL { width:XXXpx; ... opacity: 0.80; filter: alpha(opacity=80); } Полупрозрачность на месте получается. Но ИЕ похоже наследует эту ширину в XXX пикселей на _весь_ блок , включая вложенные (которые вбок должны выпадать). В итоге боковые менюшки получаются не видны целиком, только та часть видна, что попадает по ширине в эти XXX пикселей. :-(В мозилле все ОК. Это тоже "фича" ИЕ? Как-нибудь можно победить? -
выпадающее меню на CSS и полупрозрачный фон
Ziggy Stardust replied to Ziggy Stardust's question in HTML Coding
Про данную особенность фильтра понял. Увы мне похоже тогда такой вариант не подходит. Не могу жестко ширину задавать. :-( У меня это меню должно быть растягивающимся пропорционально ширине окна браузера. А какие еще варианты реализовать полупрозрачность есть? Сделать 1х1 png с полупрозрачным нужным цветом и указать его в качестве фона для нужных UL? При таком варианте будет ли оно нормально во всех браузерах отображаться? -
выпадающее меню на CSS и полупрозрачный фон
Ziggy Stardust replied to Ziggy Stardust's question in HTML Coding
Хммм... У меня при таком варианте полупрозрачность в первом выпадающем меню конечно появилась, но при этом ширина в 200 пикселей применяется ко всему меню, включая второе. Т.е. от второго выпадающего меню видно только кусочек, который попадает в эти 200 пикселей... Это в ИЕ так. В мозилле/опере нормально. З.Ы.: В любом случае мне похоже этот вариант не подходит. :-( -
Пробую накидать выпадающую менюшку реализованную без всякого JS только на CSS. Сама по себе менюшка работает нормально. Возникла проблема с реализацией полупрозрачного фона. Насколько я вычитал в доках за полупрозрачность отвечают следующие свойства: "opacity: 0.xx" - для мозиллы/оперы, "filter: alpha(opacity=xx)" - для IE. С мозиллой /оперой проблем нет. Проблемы в ИЕ - полупрозрачность применяется только ко 2-му уровню выпадающего меню. В чем проблема не понимаю... Может кто подскажет? Вот немного сокращенный код (для меньшего объема я только для 1-го пункта выпадающие меню оставил): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <STYLE Type="text/css"> BODY { font-family: Tahoma, Verdana; color: #003366; background-color: #A1BCE7; font-size: 12px; } .topnav, .topnav UL { list-style: none; margin: 0; padding: 0; border: 0px; text-align: left; width: 100%; } .topnav LI { position: relative; border: 0px; width: 100%; } .topnav A { font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; display: block; } A.top_menu_on:link, A.top_menu_on:visited { color: #1A57AE; } A.top_menu_on:active, A.top_menu_on:hover { color: #4883D6; } A.top_menu_off:link, A.top_menu_off:visited { color: #FFFFFF; } A.top_menu_off:active, A.top_menu_off:hover { color: #CCCCCC; } .topnav LI UL { display: none; position: absolute; text-align: left; border: 1px solid #0c2958; border-top: 0px; padding: 0px; padding-top: 6px; background: #1D488C; opacity: 0.80; filter: alpha(opacity=80); } .topnav LI LI:hover, .topnav LI LI.jshover { background: #6e8ab8; } .topnav LI LI A { font-size: 11px; text-align: left; font-weight: normal; text-decoration: none; } .topnav LI LI A:link, .topnav LI LI A:visited { color: #FFFFFF; } .topnav LI LI A:active, .topnav LI LI A:hover { color: #CCCCCC; } .topnav LI:hover UL, .topnav LI.jshover UL { display: block; } .topnav LI:hover LI UL, .topnav LI.jshover LI UL { display: none; list-style: none; text-align: left; top: 0px; left: 95%; padding: 0px; border: 1px solid #0c2958; background: #1D488C; width: 180px; } .topnav LI:hover LI:hover UL, .topnav LI.jshover LI.jshover UL { display: block; } </STYLE> </HEAD> <SCRIPT Type="text/javascript"><!--//--><![CDATA[//><!-- jsHover = function() { for (var j=1; j<=3; j++) { var nav = "nav" + j; var hEls = document.getElementById(nav).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> <BODY MarginWidth="0" MarginHeight="0" LeftMargin="0" TopMargin="0"> <DIV Align="center"> <TABLE Width="50%" Border="1" CellSpacing="0" CellPadding="0"> <TR VAlign="top"> <TD Align="center"> <UL ID="nav1" Class="topnav"> <LI> <A Class="top_menu_off" Href="#">Пункт главного <BR> меню 1</A> <UL> <LI> <A Href="#">Пункт подменю номер 1</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="#">Пункт подменю номер 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> </UL> </LI> </UL> </LI> </UL> </TD> <TD Align="center"> <UL ID="nav2" Class="topnav"> <LI> <A Class="top_menu_off" Href="data/index1.phtml">Пункт главного <BR> меню 2</A> </LI> </UL> </TD> <TD Align="center"> <UL ID="nav3" Class="topnav"> <LI> <A Class="top_menu_off" Href="data/index1.phtml">Пункт главного <BR> меню 3</A> </LI> </UL> </TD> </TR> </TABLE> </DIV> <BR> <DIV Align="center"> <P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. <P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. <P> Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. Просто какой то текст для фона. </DIV> </TABLE> </BODY> </HTML>