Welcome to WebmasterWorld Guest from 54.196.208.6

Forum Moderators: not2easy

Message Too Old, No Replies

Control of menu items with images and CSS

     
11:04 am on Jun 1, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 994
votes: 0


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.
3:32 pm on June 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
11:32 am on June 10, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts:994
votes: 0


Maybe some designers missed it. Ha,ha.
12:14 pm on June 10, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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?