css sprites

[rebelbwb]

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

Code:

• Invitation
• Weekend
• Team
• Registration
• FAQ

[rebelbwb]

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;
}

[chazzwick]

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.

[rebelbwb]

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

[rebelbwb]

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

[rebelbwb]

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!

[Author]

Posts