Sign up with Googleguest2013-1
guest
- Joined
- Aug 22, 2003
- Messages
- 19,800
So I've never really done CSS or worked with Sprites (yes yes, *shock* *awe*)... I leave that to brilliant people to do for me and I just do my programming....
Anyway, so now I'm busy doing CSS Sprites. I have a tabbed menu.
The way I've setup the tab is broken up into 3 parts and 3 different tabs (3 different image (png) containing sprites). These will make up 3 states of the tab. Normal, Hover and Active.
The 3 different images contains:
image 1: body (normal/colored for active/colored for active with a little arrow)
image 2: left sides (first in sequence, normal, active side left,active left side last)
image 3: right sides (last in sequence, normal, active right side,active right side last)
All 3 make up one tab:
left - body - right
And depending on the style definition, you get a normal tab/hover tab/active tab
I have seen examples of tabs which uses one image for the entire tab, but this limits the expandability of the tab system by limiting it's width, so I have to cater for differing widths in images rather than what I've used above here (I like using my way, its better
)
My question is, on hover, I set the background-position to what I want within the sprite to change the state of the button so to speak.... but how to I bring all 3 sprites together in 1 hover?
Currently I can do one of the 3 but not all 3 at the same time making up 1 button.
The positions are correct, and in writing out the html it works perfectly, it's just when I apply the CSS hover (for hover/active for example) is that I can't seem to figure out how to get left body AND right to change
Am I dumb?
Vote now by giving me the answer!
Anyway, so now I'm busy doing CSS Sprites. I have a tabbed menu.
The way I've setup the tab is broken up into 3 parts and 3 different tabs (3 different image (png) containing sprites). These will make up 3 states of the tab. Normal, Hover and Active.
The 3 different images contains:
image 1: body (normal/colored for active/colored for active with a little arrow)
image 2: left sides (first in sequence, normal, active side left,active left side last)
image 3: right sides (last in sequence, normal, active right side,active right side last)
All 3 make up one tab:
left - body - right
And depending on the style definition, you get a normal tab/hover tab/active tab
I have seen examples of tabs which uses one image for the entire tab, but this limits the expandability of the tab system by limiting it's width, so I have to cater for differing widths in images rather than what I've used above here (I like using my way, its better
)My question is, on hover, I set the background-position to what I want within the sprite to change the state of the button so to speak.... but how to I bring all 3 sprites together in 1 hover?
Currently I can do one of the 3 but not all 3 at the same time making up 1 button.
The positions are correct, and in writing out the html it works perfectly, it's just when I apply the CSS hover (for hover/active for example) is that I can't seem to figure out how to get left body AND right to change
Am I dumb?
Vote now by giving me the answer!