CSS Sprite Position and Menu LI width

fAdEd247 · 03-11-2010, 10:11 PM

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

mezangath · 03-12-2010, 04:55 AM

margin-bottom:-100px;

PixelPusher · 03-12-2010, 03:49 PM

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?

fAdEd247 · 03-13-2010, 10:12 PM

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

PixelPusher · 03-16-2010, 05:39 PM

So it sounds like you fixed the problem? If so, good job and you are welcome.

03-11-2010, 10:11 PM	#1
fAdEd247 New Member Join Date: Feb 2010 Posts: 4	CSS Sprite Position and Menu LI width 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

03-12-2010, 04:55 AM	#2
mezangath Silver Member Join Date: Mar 2009 Location: Stockholm, Sweden Posts: 108	margin-bottom:-100px; __________________ Nerdrage Mezangath Web

03-12-2010, 03:49 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	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? __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

03-16-2010, 05:39 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	So it sounds like you fixed the problem? If so, good job and you are welcome. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-13-2010, 10:12 PM	#4
fAdEd247 New Member Join Date: Feb 2010 Posts: 4	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