Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Help please with navigation menu

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #28178
    webmadter
    Member

    Guys, if anyone can help, please do it. I’m stuck.

    This is a part of code:

    Code:
    [size=150]

    [/size]

    This is css part:

    Code:
    #navlinks {background:#ebeadc url(http://bestinform.org/images/menuback.png) repeat-x 0 0; height:49;position: relative; width:100%;}
    #navlogo a {float:left;display:block;height:49px;background:transparent url(http://bestinform.org/images/navigation.gif) 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(http://bestinform.org/images/navigation.gif) -177px 0;text-indent:-9999px;}
    .navah a:hover {background-position:-177px -49px;}

    #naviq a {float:left;display:block;height:49px;width:66px;background:url(http://bestinform.org/images/navigation.gif) -248px 0;text-indent:-9999px;}
    #naviq a:hover {background-position:-248px -49px;}

    #navrz a {float:left;display:block;height:49px;width:68px;background:url(http://bestinform.org/images/navigation.gif) -314px 0;text-indent:-9999px;}
    #navrz a:hover {background-position:-314px -49px;}
    #navspoil a {float:left;display:block;height:49px;width:85px;background:url(http://bestinform.org/images/navigation.gif) -382px 0;text-indent:-9999px;}
    #navspoil a:hover {background-position:-382px -49px;}
    #navforum a {float:left;display:block;height:49px;width:73px;background:url(http://bestinform.org/images/navigation.gif) -467px 0;text-indent:-9999px;}
    #navforum a:hover {background-position:-467px -49px;}
    #navblogs a {float:left;display:block;height:49px;width:89px;background:url(http://bestinform.org/images/navigation.gif) -540px 0;text-indent:-9999px;}
    #navblogs a:hover {background-position:-540px -49px;}
    #navgroups a {float:left;display:block;height:49px;width:77px;background:url(http://bestinform.org/images/navigation.gif) -629px 0;text-indent:-9999px;}
    #navgroups a:hover {background-position:-629px -49px;}
    #navmembers a {float:left;display:block;height:49px;width:93px;background:url(http://bestinform.org/images/navigation.gif) -706px 0;text-indent:-9999px;}
    #navmembers a:hover {background-position:-706px -49px;}
    #navstore a {float:left;display:block;height:49px;width:63px;background:url(http://bestinform.org/images/navigation.gif) -799px 0;text-indent:-9999px;}
    #navstore a:hover {background-position:-799px -49px;}

    #navjoin a {float:left;display:block;height:49px;width:108px;background:url(http://bestinform.org/images/navigation.gif) -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:

    [img]http://img203.imageshack.us/img203/7654/imageyr.gif[/img]

    And in firefox and opera the right side display no background image:

    [img]http://img40.imageshack.us/img40/8049/imagehg.gif[/img]

    If you can help optimize this code i will appreciate this.

    To rest the menu you can use this link:

    Blablbla

    There’s nothing to look at, only the menu )

    #71649
    webmadter
    Member
    "virtual" wrote:
    I assume you have copied the code from the bestinform.org blog. If what you want to do is make it show straight across the page you need to add

    Code:
    #navlinks li {
    display: inline;
    }

    It’s my domain which i use for testing code online. I have added the line you gave and it works! Thank you very much!
    If you could also help me to make the navlinks div to show background correct that would be more then just nice :)

    I mean my second screenshot. Opera and Firefox left main navlinks div without background and i dont know why. I tried variations with the last button (navrest, but is doesnt display background). The main template use fluid width so when the width will be more than 980 the navigation panel will be the same size as now on the left( That’s not good at all =(

    Sorry for my english, it’s not my parent language.

    #69520
    webmadter
    Member

    solved. thank you guys!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.