בעיה עם CSS menu, איכספלורר לא אוהב את הרעיון
שלום, אני מנסה לעשות CSS menu, מבוסס על המדריך הזה:
http://www.webmaster.org.il/article.asp?id=205
(אחלה מדריך...)
הכל טוב ויפה ואפילו עובד, אבל אני מנסה לשנות לו את העיצוב...(אני עובד על זה, ו- 70% סיימתי)
בכל מקרה, את ה- 70% שסיימתי, בפיירפוקס נראה נהדר(אני יודע שהצבעים לא ממש מתאימים...) :
http://uploaded.fresh.co.il/2007/01/04/82116367.png
והנה איך זה נראה באיכספלורר:
http://uploaded.fresh.co.il/2007/01/04/43894070.png
עכשיו, סימנתי לכם 3 נקודות של מה שמפריע לי:
1)הגדרתי z-index לתת-תפריט שיהיה מתחת לתפריט, פיירפוקס הבין את זה, IE התעלם...
2)כשעולים על התפריט מרמה ראשונה, למרות שזה לא אמור להיות, עדיין רואים את ה"רקע" הורוד הזה..
3) הרמה השלישית מופיעה על הרמה השניה
ועוד דבר מוזר בשני הדפדפנים:
ל- מילה בינונית יש משום מה יותר רוחב משאר הקטגוריות.
זה הקובץ CSS (הורדתי קטעים לא רלוונטיים):
PHP קוד:
html, body
{
behavior: url("csshover.htc");
height: 100%;
margin: 0;
padding: 0;
}
div#menu
{
float: right;
width: 742px;
text-align : right;
background : url(images/menu_bar.gif) repeat-x;
height : 43px;
}
div#menu ul
{
margin: 0;
padding: 0;
list-style: none;
background: #DAE8F8;
border: solid silver;
border-width: 0 1px;
}
div#menu li
{
position: relative;
margin: 0 -1px 0 0;
display: block;
float: right;
width: 144px;
}
* html div#menu li
{
float: right;
}
div#menu li.submenu
{
background: url(images/menu_btnd.gif) no-repeat;
height : 43px;
z-index : 99;
}
div#menu li.nsmenu
{
background: url(images/menu_btnt.gif) no-repeat;
height : 43px;
z-index : 99;
}
div#menu li.submenu li.submenu
{
background: url("submenu.gif") no-repeat center left;
}
div#menu li.submenu li.submenu:hover
{
background-color: #fcc;
}
div#menu li.nsmenu:hover
{
background : url(images/menu_btnb.gif) no-repeat;
height : 43px;
}
div#menu li.submenu:hover
{
background : url(images/menu_btnb.gif) no-repeat;
height : 43px;
}
div#menu li:hover
{
background-color : #fcc;
}
div#menu li a
{
display: block;
text-decoration: none;
padding: 0.15em 0.5em 0.15em 0;
width: 144px;
}
div#menu>ul a
{
width: auto;
}
div#menu ul ul
{
position: absolute;
display: none;
margin-top: -1px;
width: 144px;
border-top: 1px solid silver;
z-index : -99;
}
* html div#menu ul ul
{
margin-right: -1px;
}
div#menu ul ul li
{
border-bottom: 1px solid silver;
}
div#menu ul.first li.submenu:hover ul.second,
div#menu ul.second li.submenu:hover ul.third
{
display: block;
}
div#menu ul.second
{
top: 2em;
right: -1px;
padding-top : 3px;
}
div#menu ul.third
{
top: 0;
right: 144px;
}
/*.menu_btn
{
background : url(images/menu_btnt.gif) no-repeat;
}*/
div#body {
width: 810px;
margin: 0 auto;
height: 100%;
background : #EAEAEA;
}
והנה ה- HTML (גם עם קטעים לא רלוונטים):
PHP קוד:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Theame setup!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="body">
<div id="shadow_left"></div>
<div id="shadow_right"></div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="734" height="115" id="logo" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/logo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="images/logo.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="734" height="115" name="logo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="menu">
<ul class="first">
<li class="submenu"><a href="#">אאאאאחדדדדדדדדד</a>
<ul class="second">
<li><a href="#">שששתתיייםםם</a></li>
<li><a href="#">שששלווווששש!</a></li>
</ul>
</li>
<li class="nsmenu"><a href="#">מילה ארוכה</a></li>
<li class="submenu"><a href="#">מילה ארוכה ארוכה</a>
<ul class="second">
<li><a href="#">מילה קצרה</a></li>
<li><a href="#">מילה</a></li>
<li class="submenu"><a href="#">מילה בינונית</a>
<ul class="third">
<li><a href="#">מילה ארוכה ארוכה</a></li>
<li><a href="#">מילה ארוכה</a></li>
<li><a href="#">מילה</a></li>
</ul>
</li>
<li><a href="#">שלום</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
|
