Welcome to WebmasterWorld Guest from 54.147.26.192

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: 995
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:995
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?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members