Fri, 2010-02-26 09:00
Guys, if anyone can help, please do it. I'm stuck.
This is a part of code:
<div id="navlinks"><ul> <li id="navlogo"> <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" id="navlogo"> <?php bloginfo('name'); ?> </a> </li> <li class="navah"> <a href="#" id="navah">Forum</a> </li> <div class="ahdropped"> 08 <p>Here's an example of a paragraph inside the drop-down panel. We placed this paragraph in the left column. Then we have 2 more columns on the right with a H3 for the section title and then we have unordered lists.</p> 27 </div> <li id="naviq"> <a href="#" id="naviq">Forum</a> </li> <li id="navrz"> <a href="#" id="navrz">Forum</a> </li> <li id="navspoil"> <a href="#" id="navrz">Forum</a> </li> <li id="navforum"> <a href="#" id="navforum">Forum</a> </li> <li id="navblogs"> <a href="#" id="navblogs">Forum</a> </li> <li id="navgroups"> <a href="#" id="navgroups">Forum</a> </li> <li id="navmembers"> <a href="#" id="navmembers">Forum</a> </li> <li id="navstore"> <a href="#" id="navstore">Forum</a> </li> </li> <li id="navjoin"> <a href="#" id="navjoin">Forum</a> </li> <li id="navrest"><a href="#" id ="navrest">1</a></li> </ul> </div>
This is css part:
#navlinks {background:#ebeadc url(<a href="http://bestinform.org/images/menuback.png" rel="nofollow">http://bestinform.org/images/menuback.png</a>) repeat-x 0 0; height:49;position: relative; width:100%;} #navlogo a {float:left;display:block;height:49px;background:transparent url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) 0 0;text-indent:-9999px;width:177px;} #navlogo a:hover {background-position:0 -49px;} .navah a {float:left;display:block;height:49px;width:71px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -177px 0;text-indent:-9999px;} .navah a:hover {background-position:-177px -49px;} #naviq a {float:left;display:block;height:49px;width:66px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -248px 0;text-indent:-9999px;} #naviq a:hover {background-position:-248px -49px;} #navrz a {float:left;display:block;height:49px;width:68px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -314px 0;text-indent:-9999px;} #navrz a:hover {background-position:-314px -49px;} #navspoil a {float:left;display:block;height:49px;width:85px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -382px 0;text-indent:-9999px;} #navspoil a:hover {background-position:-382px -49px;} #navforum a {float:left;display:block;height:49px;width:73px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -467px 0;text-indent:-9999px;} #navforum a:hover {background-position:-467px -49px;} #navblogs a {float:left;display:block;height:49px;width:89px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -540px 0;text-indent:-9999px;} #navblogs a:hover {background-position:-540px -49px;} #navgroups a {float:left;display:block;height:49px;width:77px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -629px 0;text-indent:-9999px;} #navgroups a:hover {background-position:-629px -49px;} #navmembers a {float:left;display:block;height:49px;width:93px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -706px 0;text-indent:-9999px;} #navmembers a:hover {background-position:-706px -49px;} #navstore a {float:left;display:block;height:49px;width:63px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -799px 0;text-indent:-9999px;} #navstore a:hover {background-position:-799px -49px;} #navjoin a {float:left;display:block;height:49px;width:108px;background:url(<a href="http://bestinform.org/images/navigation.gif" rel="nofollow">http://bestinform.org/images/navigation.gif</a>) -862px 0;text-indent:-9999px;} #navjoin a:hover {background-position:-862px -49px;} #navrest a {float:right;display:block; height:49px; text-align:right;margin:auto;width:auto;background:url(../images/menuback.png)repeat-x;text-indent:-9999px;} #navrest li {float:left;display:block; height:49px; margin:auto;width:auto;background:url(../images/menuback.png)repeat-x;text-indent:-9999px;}
This is menu, that use 1 background pic for all buttons. The css is huge but i cannot minimize it( I'm not that good in css. And In most of old versions of brousers the buttons looks like cascade:
And in firefox and opera the right side display no background image:
If you can help optimize this code i will appreciate this.
To rest the menu you can use this link:
There's nothing to look at, only the menu )