Control of menu items with images and CSS

[toplisek]

I like to set images without webfonts. How to set UL/LI settings if I like to use one image.

Sample:
#menu1 ul#menu_content1 li.selected a {
background-position: 0 -45px;
}
#menu1 ul#menu_content1 li a {
background: url("../images/mymenuitems.png") no-repeat scroll 0 0 transparent;
width: 55px;
}
#menu1 ul li:first-child a {
background-position: 0 -10px;
}

Is there some software or tool to help with position, selected, CSS, specially for the selected items?

I like to set in the correct way.

[alt131]

Hi toplisek, do you mean a tool that will calculate the background-position for each sprite? If so, it would be very useful, but to my knowledge there isn't one. Basically you just have to do the maths yourself.

[toplisek]

Maybe some designers missed it. Ha,ha.

[alt131]

yup, I'll bet no one thought of background-position when deciding to skip maths class :)

That said, I was just about to post when yours landed. Steve Soudar's spriteme [spriteme.org] makes sprites, but it also outputs the background position once it has done so.

Intended for converting non-sprited images rather than designing from the ground up, but maybe some help?