Grow your CSS skills. Land your dream job.

css sprites

  • # December 9, 2008 at 10:34 pm

    Before I forget here is the URL I’m dealing with http://openingweekend.org/template.html

    I followed Chris’ vid tutorial on 3 state menus just about to a ‘T’ minus any real positioning of the menu itself. Right now all three states show as you can tell from the page referenced above. I had thought about either position: absolution or floating it to get it up near the logo/top right of page. The problem is that all 3 states are showing and I can’t figure out how to get only one to show/function properly. Any help is appreciated.

    Thanks

    Here’s the CSS portion

    Code:
    ul#menu {
    list-style: none;
    }
    ul#menu li {
    display: inline;
    }
    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 82px;
    float: left;
    }
    ul#menu li a.invitation {
    background: url(images/invitation.png) no-repeat bottom center;
    width: 91px;
    }
    ul#menu li a.weekend {
    background: url(images/weekend.png) no-repeat bottom center;
    width: 91px;
    }
    ul#menu li a.team {
    background: url(images/team.png) no-repeat bottom center;
    width: 91px;
    }
    ul#menu li a.registration {
    background: url(images/registration.png) no-repeat bottom center;
    width: 91px;
    }
    ul#menu li a.faq {
    background: url(images/faq.png) no-repeat bottom center;
    width: 91px;
    }
    ul#menu li a.invitation:hover, ul#menu li a.invitation:active,
    ul#menu li a.weekend:hover, ul#menu li a.weekend:active,
    ul#menu li a.team:hover, ul#menu li a.team:active,
    ul#menu li a.registration:hover, ul#menu li a.registration:active,
    ul#menu li a.faq:hover, ul#menu li a.faq:active{
    background-position: center center;
    }

    Here’s the markup

    Rob
    # December 10, 2008 at 5:00 am
    Code:
    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 82px;
    float: left;
    }

    You set your LI height to the full height of the image, instead of just one part of the image. I think its like 26px for the height of your buttons. Thats why you can see them all :)

    That might give you enough info to tweek the rest of it to work properly, if not post back :)

    # December 11, 2008 at 7:35 am

    Thanks Rob for the good assistance. I greatly appreciate it. All seems to be working well. I am now having an issue with getting the active state to appear. Any help on that is appreciated.

    All the pages are the same content wise right now so don’t be confused when activating each link and seeing dupe content come up. Wanted to get each page on the server in order to test the nav and all states

    Thanks

    Here’s the URL – http://www.openingweekend.org/template.html

    Code:
    ul#menu {
    list-style: none;
    position: absolute;
    top: 30px;
    right: 15px;
    }
    ul#menu li {
    display: inline;
    }
    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 27px;
    float: left;
    }
    ul#menu li a.invitation {
    background: url(images/invitation.png) no-repeat bottom center;
    width: 94px;

    }
    ul#menu li a.weekend {
    background: url(images/weekend.png) no-repeat bottom center;
    width: 94px;

    }
    ul#menu li a.team {
    background: url(images/team.png) no-repeat bottom center;
    width: 94px;
    }
    ul#menu li a.registration {
    background: url(images/registration.png) no-repeat bottom center;
    width: 94px;

    }
    ul#menu li a.faq {
    background: url(images/faq.png) no-repeat bottom center;
    width: 94px;
    }
    ul#menu li a.invitation:hover,
    ul#menu li a.weekend:hover,
    ul#menu li a.team:hover,
    ul#menu li a.registration:hover,
    ul#menu li a.faq:hover{
    background-position: center center;
    }
    ul#menu li a.invitation:active,
    ul#menu li a.weekend:active,
    ul#menu li a.team:active,
    ul#menu li a.registration:active,
    ul#menu li a.faq:active{
    background-position: top center;
    }

    Rob
    # December 11, 2008 at 8:36 am

    as far as I can see the active state dose appear, its just the active state button colour is the same as your background, so you only see text. Unless thats what its ment to be like and I am looking at it in the wrong browser?

    # December 11, 2008 at 12:39 pm

    just some advice about the canoe picture. At 392kb its way too big, it took ages to load. Save it as a high quality JPEG instead, it’ll keep the quality and reduce the size by a lot as well.

    # December 11, 2008 at 2:19 pm

    I’m looking at it in FF2 and IE7. I notice that when for instance I click on the ‘team’ link or really any link for that matter that it doesn’t seem to show. Yes, I have it set up to where the active link tab background is the same background color so that really all that shows is the text but it doesn’t seem to ‘stick’ if you will. Seems to revert back to it’s original state. Maybe I’ll clear out my cache, browser and re-start it back up to see how it functions.

    Thanks

    Rob
    # December 11, 2008 at 3:21 pm

    OHH Do you want it to stay "active"? Because active means the moment you click it – not the time after :)

    If you want it to stay "active" you would have to set up some id that you can apply to your body, that will keep the "active" graphic displayed.

    Like if on your team page you give the body tag…

    Code:

    and then in the CSS

    Code:
    #team ul#menu li a.team { background-position: top center }

    then if you give each page a id, and specify wich LI you want to change – it will stay "active"

    is that what you mean?

    # December 11, 2008 at 4:55 pm

    Alright – thanks to your help I’m cookin’ with gas now. This is my first real go at using sprites – thanks again for the patient instruction Rob

    Ben

    Rob
    # December 11, 2008 at 5:45 pm

    awesome stuff dude :) and no probs :D

    # December 11, 2008 at 7:38 pm

    Nice, clean looking site!

    A couple of notes (I know, they aren’t necessarily related to this topic):

    The above poster was correct about the canoe image, it does not need to be a .png. Saving that at even 60% Quality as a .jpeg will drastically lower the file size and you will hardly notice the difference. .png’s should really only be used, imo, for transparency (shadows) and opacity.

    Also, the site seems to be missing a footer. Footers are great for holding additional information like copyrights, contact info, and basic navigation (essentially a repeat of the top nav but in text form: Invitation | Weekend | Team…). It also provides an ‘end’ to the page. As it is right now, it visually feels like the page should continue because nothing is visually telling my brain that it shouldn’t.

    Looks good though!

    # December 11, 2008 at 10:45 pm

    Thanks for the good feedback especially the big header image. I’ve been testing it on a local server so I guess it seems to load pretty quickly and after it gets cached from the server I guess I tend to lose sight of load times.

    Yeah..not totally decided on the footer and I mentioned that to the client. Because it is such a small site with such little content didn’t feel the need to do the traditional links in the footer. At a minimum may add some kind of copyright, credit notice, contact email.

    I’ll just say I’ve been very impressed with the quality of responses I’ve received in this my first real query posed on this forum. Again, I appreciate your time and input as it has increased my knowledge a little bit more hopefully making me a little bit better and thoughtful web designer.

    Thanks crew!

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

You must be logged in to reply to this topic.

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