Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

Control of menu items with images and CSS

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

WebmasterWorld Senior Member 5+ Year Member



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 Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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 Jun 10, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

WebmasterWorld Senior Member 5+ Year Member



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?
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month