Grow your CSS skills. Land your dream job.

nav bar with sprites

  • # October 22, 2009 at 11:53 pm

    Hi,

    url of nav bar: http://www.juliepb.com

    I am working on a menu bar with sprites and am having a problem with figuring out a couple of things.

    First, the current state of the navigation – I tried to implement the trick from this article on CSS tricks:

    http://css-tricks.com/including-navigat … hlighting/

    I included the id of each page in the body tag – and added the css (line #156), but am stuck with what to do next -?

    Next, I am having a background/nab bar image shift problem when I move between "home" and any other page……??

    Any help would be appreciated – any amusement at my (inexperienced) expense would be understood….

    - Julie

    # October 23, 2009 at 6:45 am

    For current page highlighting try this:

    Code:
    body#home ul#nav li.home a {
    background-position:center bottom;
    }

    and do the same for the rest of your pages changing the body id and li class to suit.

    As for the other problem, it’s not actually the image shifting it’s just that the other pages have no content and therefore no scrollbar so the whole page is moving. Just add this to your stylesheet to force a scrollbar where there isn’t one:

    Code:
    html {
    overflow-y: scroll;
    }
    # October 23, 2009 at 2:59 pm

    Fantastic!! Thank you so much!

    - Julie

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".