Autor | Zpráva | ||
---|---|---|---|
dr.m Profil * |
prosím o pomoc.. hover menu absolutně pozicované se v MSIE 5/6 nezobrazí korektně - po najetí na prostřední link 'DESIGNÉŘI' viz kód se 3 paralelní sloupce menu 2.úrovně rozbalí zdrcnuté do sebe. FF, Opera, IE7 a Safari(Mac) bez problému.
(www.studio-lr.com/000menu.html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Studio LR</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta name="content-language" content="cz"> <style type="text/css"> body { margin:0; padding:0; color:#666 } body * { line-height:115% } html, body { height:100% } body, textarea, select { font:small "Lucida Grande", "Geneva CE", Verdana, lucida, sans-serif } * html body, h6 { font-size:x-small; f\ont-size:small } a { text-decoration:underline; color:#999 } a:hover { text-decoration:underline; color:#f60 } h1 a { text-decoration:none; color:#737373 } h1 { margin-bottom:1em; font-size:14px; color:#999 } h2, h3, h4, h5, h6, h7 { margin-bottom:0.5em; color:#999 } h2 { font-size:13px } h3 { font-size:85%; font-weight:normal } .clr { clear:both; height:0px; font-size:1px; overflow:hidden } #page { background:url(http://www.studio-lr.com/img/bg-page.gif) no-repeat } #central { width:900px; margin:0 auto; } #header1 { float:left; width:120px; height:134px; background:#838383 url(http://www.studio-lr.com/img/pan1.gif) } #header2 { float:left; height:134px; width:660px } #header3 { float:right; width:120px; height:190px } #header2, #hoverMenu, #right, #foot { background:white } #logo { float:left; width:120px; height:56px; background:url(http://www.studio-lr.com/img/logo.gif) } #hoverMenu { float:left; height:56px; width:660px } #content { clear:both; background:url(http://www.studio-lr.com/img/bg-content.gif) repeat-y } #left { float:left; width:100px; padding:10px } #right { float:left; width:486px; padding:10px 12px } * html #right { width:510px; wid\th:486px } #edge { float:left; width:130px; padding:10px; font-size:77% } * html #edge { width:150px; wid\th:130px } #foot { padding:10px 10px 10px 132px; font-size:11px; background:url(http://www.studio-lr.com/img/bg-foot.gif) no-repeat } #edge a, #left a { color:#f60; } p { margin-bottom:0.5em } h3 p { margin-bottom:5em } .item { padding-bottom:1.5em; clear:both } .il { float:left; margin:0.15em 0.5em 0.25em 0; border:1px solid #999 } /* HOVER MENU.................................................................. ................................................. */ #mainMenu { font-weight:bold; padding:0; margin:0; float:left; display:block; position:relative; list-style-type:none } #mainMenu ul { z-index:20; padding:0; margin:0; line-height:1; list-style-type:none } #mainMenu a { color:#999; text-decoration:none; white-space:nowrap } #mainMenu ul a { color:#ccc; padding-bottom:0.2em; font-size:11px; line-height:100% } #mainMenu ul a:hover { color:#f60 } li#studio { position:absolute; left:13px } li#program { position:absolute; left:103px } li#designeri { position:absolute; left:210px } li#workshop { position:absolute; left:327px } li#lr { position:absolute; left:547px } li#en { position:absolute; left:644px } li#studio ul, li#program ul, li#designeri ul, li#designeri ul ul, li#workshop ul, li#lr ul { bottom:1.2em } /* ...................................................................... ............................................. */ #mainMenu a { display:block; width:10em } #mainMenu li {/* all list items */ float:left; width:10em } #mainMenu li ul {/* second-level lists */ position:absolute; background:url(http://www.studio-lr.com/img/spacer.gif); width:10em; left:-999em } #mainMenu li:hover ul, #mainMenu li li:hover ul, #mainMenu li.sfhover ul, #mainMenu li li.sfhover ul {/* lists nested under hovered list items */ left:auto } #mainMenu li:hover ul#designeri2 { left:10em } #mainMenu li:hover ul#designeri3 { left:20em } /* ...................................................................... ............................................. */ #mainMenu li ul ul {/* third-and-above-level lists */ margin:0 0 0 7.7em; bottom:0 } #mainMenu li:hover ul ul, #mainMenu li.sfhover ul ul { left:-999em } </style> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("mainMenu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <div id="page"> <div id="central"> <!-- ................................................................ --> <div id="header1"></div> <div id="header2"> <object type="application/x-shockwave-flash" data="http://www.studio-lr.com/head.swf?po=13" width="660" height="134"> <param name="movie" value="http://www.studio-lr.com/head.swf?po=13"> <param name="wmode" value="transparent"> <img src="http://www.studio-lr.com/img/pan2.jpg" width="660" height="134" border="0" alt="No Flash"> </object> </div> <div id="header3"><img src="http://www.studio-lr.com/img/spacer.gif" width="120" height="120" border="0" alt=""></div> <div id="logo"><a href="#"><img src="http://www.studio-lr.com/img/logo.gif" width="120" height="56" border="0" alt="Studio LR"></a></div> <div id="hoverMenu"> <ul id="mainMenu"> <li id="studio"><a href="#" title="aktuality Studia LR">studio</a> <ul> <li><a href="#">pododkaz</a></li> </ul> </li> <li id="program"><a href="#" title="program 2008">program</a> <ul> <li><a href="#">pododkaz</a></li> </ul> </li> <li id="designeri"><a href="#" title="designéři">designéři</a> <ul id="designeri1"> <li><a href="#">pododkaz 1</a></li> </ul> <ul id="designeri2"> <li><a href="#">pododkaz 2</a></li> </ul> <ul id="designeri3"> <li><a href="#">pododkaz 3</a></li> </ul> </li> <li id="workshop"><a href="#" title="aktuality workshop">workshop Farma Olšany</a> <ul> <li><a href="#">pododkaz</a></li> </ul> </li> <li id="lr"><a href="#">LR style</a> <ul> <li><a href="#">LR style</a></li> </ul> </li> <li id="en"><a href="#">en</a></li> </ul> <div class="clr"></div> </div> <!-- ................................................................ --> <div id="content"> <!-- .............................. --> <div id="left"></div> <!-- .............................. --> <div id="right"> <div class="item">.......................... </div> </div> <!-- .............................. --> <div id="edge">.......................... </div> </div> <div class="header3"><img src="http://www.studio-lr.com/img/spacer.gif" width="120" height="120" border="0" alt=""></div> <!-- .............................. --> <div class="clr"></div> <!-- ................................................................ --> <div id="foot"> <p>.......................... </p> </div> </div> </div> </body> </html> |
||
Davex Profil |
#2 · Zasláno: 28. 3. 2008, 21:17:40
IE6- umí pseudo třídu :hover pouze u odkazů.
|
||
dr.m Profil * |
#3 · Zasláno: 29. 3. 2008, 11:55:49
právě, proto je tam ten javascript.. nemusí se v něm něco upravit, aby to fungovalo i pro IE 5/6? programovat js bohužel neumím.
|
||
Davex Profil |
#4 · Zasláno: 29. 3. 2008, 15:35:42
Odpovídající definici stylu tam nevidím.
#mainMenu li.sfhover ul#designeri2 #mainMenu li.sfhover ul#designeri3 |
||
Časová prodleva: 6 dní
|
|||
dr.m Profil * |
#5 · Zasláno: 4. 4. 2008, 11:58:28
jasně, chybka se vloudila,) díky za pomoc..
|
||
Časová prodleva: 16 let
|
0