I appreciate your reply, thank you very much. One question though:
Looking at their menu (modcloth.com) or any menu for that matter, would best practice be to use one large image for all the categories....or should I slice up the header creating individual images.
My assumption would be to create 2 images.....one image containing the whole menu (products, about us, contact us, etc.).....and then the second image would be the menu again in a different colour....and then use the sprites to get the rollover effect. Would you agree? Or do I need individual images for each rollover (products, about us, contact us, etc)?
Sprites are far superior to rollovers as there is no delay when the image switches, you instead use CSS to simply change the position of the background. The other advantage is that you can use plain text in front of the dynamically changing background image - Google likes that and your page will index better as you will then have hyperlinked keywords instead of images.
Take a look at my demo page, you can see how it was done with one button.
Here is another page I built where I used Sprites: The Guitar Tuner
There, sprites were used as all elements... background sprites on one image and rollover sprites on another. Background sprites only changed when the page changed from say a page to a post. RSS and buttons were rollover effect sprites.
THere is also a webpage out there called "SpriteMe" that generates sprites for you! Google it to find out more.
Once again, really appreciate you replying. I'm still a little confused, and i think it may be the way i'm explaining myself. I know how to use sprites having incorporated them into a site i had built. I had a background that comprised of many images.....and instead of breaking them up, i used one big image, and sprites to display the individual images properly....this allowed the site to load much faster.
But i'm stuck with using sprites in a menu. Your menu, for example...tuners, forks, software.....are all of these individual div's?? I can't figure out how the web browser would know that the user has his mouse over a menu button unless each menu button was in its own div.....and sprite css was written for each div to allow it to change state, am i correct?
PS - The text for your menu buttons, is that just plain text or did u use an image?