CSS Sprite Position and Menu LI width

F

fAdEd247

New Member
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
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ty,

if you want the icons/images in the sprite to be above the anchor text in the LIs, why not increase the height of the LIs and then position the sprite above them? You can vertically align the text in the LI by using "line-height:"

Make sense?
 
F

fAdEd247

New Member
Hi,

Thanks for the replies.

When I increase #mymenu li height, the submenu's increase in distance. When I increase the height of the anchor class, nothing changes visually. This is with the background position at 0 -30px

When I increase the line height in pixels, the menu content lowers, however the menu content begins to become very distant with higher height settings.

After more research, I've realized is best to compile all of the images into a single file, which is what I have now done.

For fun, I've left the first menu item as the previous sprite.

Thanks for your help.

Ty
 
You must log in or register to reply here.
Top