Thu, 2010-03-11 22:07
Hi,
I'm applying css sprites to my custom html menu. I'm unable to figure out how to position the sprite above the content of the line item, without losing visibility of the image. When I apply a background position of 0 -25px, the image locates above the content, however the image does not display properly.
I have a sprite that is 80px wide, with 2 images inside it, each 40px wide. When I set the width of line item to 40px, the menu item's content does not have enough width, and squeezes together.
How should I display the image on top of the menu content?
How can I display only 40px of the sprite, while the menu item has a width of about 55px, so the content of the menu item displays correctly?
My site is at http://www.infinitesolutionsonline.com
Thank you very much!
Ty
Sat, 2010-03-13 21:39
#1
Are you speaking of the top
Are you speaking of the top nav on your site? It looks like the text is pushing beyond the background image's size. Therein lies your problem.
You will need to add padding to incorporate the text, but again, your sprite will need to be bigger. OR, do not use sprites in this case. If you do a background image, and position it top, then add padding top to push the text down below it.