Jump to content

Ziggy Stardust

Newbie
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Ziggy Stardust

  1. Мнда... Почитал про полупрозрачность в PNG для ИЕ5 и 6. Похоже в моем случае без задания явной ширины блокам не обойтись. :-(Все равно в ИЕ не получается отображение меню так же как в мозилле/опере. Когда задаю: .topnav LI UL { width:XXXpx; ... opacity: 0.80; filter: alpha(opacity=80); } Полупрозрачность на месте получается. Но ИЕ похоже наследует эту ширину в XXX пикселей на _весь_ блок , включая вложенные (которые вбок должны выпадать). В итоге боковые менюшки получаются не видны целиком, только та часть видна, что попадает по ширине в эти XXX пикселей. :-(В мозилле все ОК. Это тоже "фича" ИЕ? Как-нибудь можно победить?
  2. Про данную особенность фильтра понял. Увы мне похоже тогда такой вариант не подходит. Не могу жестко ширину задавать. :-( У меня это меню должно быть растягивающимся пропорционально ширине окна браузера. А какие еще варианты реализовать полупрозрачность есть? Сделать 1х1 png с полупрозрачным нужным цветом и указать его в качестве фона для нужных UL? При таком варианте будет ли оно нормально во всех браузерах отображаться?
  3. Хммм... У меня при таком варианте полупрозрачность в первом выпадающем меню конечно появилась, но при этом ширина в 200 пикселей применяется ко всему меню, включая второе. Т.е. от второго выпадающего меню видно только кусочек, который попадает в эти 200 пикселей... Это в ИЕ так. В мозилле/опере нормально. З.Ы.: В любом случае мне похоже этот вариант не подходит. :-(
  4. Пробую накидать выпадающую менюшку реализованную без всякого 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>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy