Grow your CSS skills. Land your dream job.

[Solved] Overlapping Sprite Nav

  • # February 21, 2010 at 11:02 pm

    hey guys,

    im developing a site at the following staging URL:
    http://www.exsiteinteractive.ca/dev/frosh/

    The nav on the left side is a css sprite, the image can be seen here:
    http://www.exsiteinteractive.ca/dev/fro … Sprite.gif

    The problem is that when the active state is triggered the borders of the active dont extend far enough… i did the far right 2 columns in the sprite as i think i could maybe get around it this way but im sort of in a rut.

    I know that i could do this by absolutely positioning each nav item but i would rather not… i find that inefficient. If anyone has any suggestions that would be greatly appreciated.

    Also i would like to prevent the rollover effect from happening on a nav item that is in the active state.

    Thanks.

    # February 22, 2010 at 7:57 am
    Code:
    .nav_02_active {
    background: url(“../images/navSprite.gif”) -376px -36px no-repeat;
    margin-top: -4px;
    }

    also you need to change vertical sprite offset of other navs.

    # February 22, 2010 at 11:04 am

    i cant get that solution to work… it just messes up all the other offsets. and since there is no actual "page change" i cant get it to work as a viable solution for all 6 nav items.

    # February 22, 2010 at 12:28 pm

    update***

    i re-did the nav using absolute positioning so now i am getting the effect i want but still running into that 2nd problem.

    When you click on a nav item it makes it active by adding a class but than when you hover over the active it shows the hover state…

    i dont want this to happen, if i nav item is active and you roll over it there should be NO hover effect…

    The nav on this website actually has the funtionality im talking about here and it looks liek it is done using the !important style override but i cant get it working with my nav…

    Suggestions?

    # February 23, 2010 at 9:15 am

    Just an idea, what if you added a:hover state to the .navAbs_active, to show the active state on hover?

    # February 23, 2010 at 11:44 am

    thank you virtual!! worked liek a charm. very creative solution!

    # February 23, 2010 at 3:35 pm

    Glad you got it sorted… ;)

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

You must be logged in to reply to this topic.

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