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

 

When you make a sprite you don't need to put the two states right next to eachother. You can have as much space between them as you want. You can even put them on top of each other.

So, instead of this - (O represents and image} OO

Make your image like this - O_____________________O

Or this - O
_______O

 

pmek hit it on the head, add more padding between them, and given your approach you'd be better off putting them one over the other so that they are chopped off on the Y axis, since on the X axis it's going to show the other half.

Though honestly I'd probably end up putting a dummy span in the markup and positioning the dummy span for that image. That way I could set an overflow:hidden and use both axis for sliding the background around; That would allow for you to take all those separate -sprite- images and make them a single file. eleven bytes per element for <span></span> is a small price to pay for eliminating five or more server requests.

 

Hi,

Thanks for the replies.

How do I update the inner element background upon hovering on the anchor text?

<li><a><span id="inner-element"></span><br />Anchor Text</a></li>

#mymenu li a:hover inner-element {
background:url..

Thanks for your help.

Ty

 

Update -

Wow, I was almost right!

By applying
#mymenu li a.topa:hover #inner-element {
background:url..

I was able to successfully display all the sprites!

I'm unable to figure the correct syntax to display the hover image when hovering over the sub menu anchor text. I tried applying;

#mymenu a.topb ul li:hover #computer-element {
background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -48px transparent;
}

But this doesn't work..

And lastly, to align these images, I can apply margin-left to the spans.

Do you have better advise to align these images?

Thank very much for the help. It is greatly appreciated.

Ty

 

There's no way to edit previous threads?

Update -

I applied display:inline-block and this aligned my menu pretty well.

Now if I could just get the submenu's to hover the image correctly...