Forums

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

Home › Forums › CSS › CSS Sprite – 3 states desired – enabled, hover, and current

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 4, 2011 at 11:01 am #32595
    lmahoney
    Member

    I have created a sprite for my global header. I can get the CSS to work for enabled and hover states but want to move to the current state and I can’t figure out how.

    Enabled CSS – ul#menu li a.contact {
    width: 189px; background-position: -575px 0;

    Hover CSS – ul#menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
    background-position: -575px -70px;
    What do I need for current state?
    Thank you,
    Laurie

    May 4, 2011 at 11:24 am #47411
    ChrisBull
    Member

    Not sure what you meant by enabled…?

    May 4, 2011 at 11:56 am #47388
    lmahoney
    Member

    Enabled is the original state of button or tab. It is click-able as opposed to disabled.

    May 5, 2011 at 1:44 pm #47066
    lmahoney
    Member

    I’m the one confused trying to do this!

    1st YES – a – for any general styling when left alone and unclicked
    2nd YES – a:hover – for any cursor interaction
    3rd Maybe – a:active – if the button has just been clicked?

    I also want the active state for the current / selected state. The button would remain on “3rd” until clicking on a different link/button.

    Still clear as mud?
    Thanks,
    Laurie

    May 5, 2011 at 1:56 pm #47067
    Josh
    Member

    Do you mean you want something like a bullet list?

    May 5, 2011 at 2:04 pm #47069
    cpj238
    Member

    I think she wants the “Enabled” to be ‘currently selected’…? So a highlighted link to indicate that they’re on that particular page. (different color than the rest, even when the mouse goes away).

    a:active is on mouse press and hold, so that’s not really accomplishing what she wants.

    You can set a class=”current” on your anchor of the page you are on, if you want to do it manually per page, but my favorite is to do jquery url string matching to set the class on the anchor, that way it’s dynamic per page.

    Am I wrong? Hopefully I helped. If you want the jquery solution let me know, i’ll paste it in here :)

    ~ Chris

    May 5, 2011 at 6:06 pm #47032
    lmahoney
    Member

    Y’all are fabulous. Thanks for helping. Remember, I am using a sprite for my global header. I will see if I can use a class=”current” on this site, because I only have 5 pages so far.

    BUT, my next project is one with lots of departments (two rows of tabs) so maybe the jquery thing will work. I’ve not learned that yet. Will I just cut and paste or will I need more education?

    Thank you,
    Laurie

    May 6, 2011 at 8:43 am #46937
    cpj238
    Member

    Including the above will get you started (including the Jquery library).

    It matches the url string to the href that’s in the anchor:

    http://mywebsite.com/about.html
    would match

    About

    Then Just rename ‘nav li a’ to the id or class that you have your navigation set up as, and make sure you keep the anchor ‘a’ at the end, example: #mynavigation a

    Since you’re using a sprite, name each anchor with a class, example: class=”about”, then in CSS for it’s current state write: a.about.current{} to specifically target that anchor and add your sprite styles for it.

    It sounds a bit complicated, but all in all not that bad, you end up with a navigation like so:

    Also, if you don’t care about supporting IE6/7/8 then using :nth-child in your CSS to select the nav item to style instead of using specific class names on each anchor is definitely better, so for About it would be: nav li:nth-child(2) a.current{}

    Hope all of this helps you! (there are other technologies that can do this too, like PHP, ColdFusion, ASP, ect, but Jquery’s the easiest way to start!)

    ~ Chris

    May 6, 2011 at 10:07 am #46923
    lmahoney
    Member

    Wow! I will see if I can do it, and let you know.

    Thank you Chris for your time.

    Laurie

    May 9, 2011 at 10:00 am #77098
    lmahoney
    Member

    Hello guys!
    It’s still a work in progress, but check it out if you like – LMahoney.com

    My top nav still has movement issues but I’m getting there.

    Thanks again for all your comments.
    Laurie

    May 9, 2011 at 11:49 am #77057
    TheDoc
    Member

    The image on the home page is nearly 1mb! Imagine somebody on their mobile trying to check out the website! Even on a super high speed connection it won’t load instantly. Same thing with the Contact page – try reducing those file sizes!

    May 9, 2011 at 12:05 pm #77058
    cpj238
    Member

    http://www.smushit.com/ysmush.it/

    May 10, 2011 at 5:16 pm #76857
    lmahoney
    Member

    Oh yes I know. Thanks for the reminder to fix the images. lots of stuff is thrown up without much thought.

    It’s really good to know about that smush it site. I will try it out.

    Thanks for taking the time to help.
    Laurie

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