Well i tried out today, and it worked ok with the background image on the <li> element, but there are still problems to deal with this way. I used background-positioning bottom and top. But still need someone o give any explanation on all about. I used that spricing technique.
wd: How come the li isn't holding one end and the a holding the other? To get them both to hover you'd need to get both to have hover CSS like li { blah, background image } a { blah, the other background image } li:hover { change li's part of background image (remember IE6 won'tr hover these) } li a:hover { change a's part of the background image } something like on this page http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ or this one (but screw the JS, it's just IE (and FF) keeping the focus on the element, click elsewhere on the page and it's gone): http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html and as far as I know you can use one of the li's in place of their span (they use a span cause it's a loose link and not part of a list menu). *edit maybe I'll have to make one of these myself, as I don't normally use sliding doors in menus... then I'd prolly see the problems better.
Sorry for the late reply on this but I needed to use it. OK what I am doiing is the following: As you said have the LI hold the right part of the image and the A hold the left part but the A is set to display block, therefore I have to set 10px right padding to show the right part of the background image for the LI. However this means that this 10px padding is obviously not clickable! How would i go about this? Maybe it's best to stick to using the Bold tags to hold the right part of the image? Would give me some relief if i didn't need them though!!
Don't over complicated it. Set your sizes in the LI style, then set the LI A as a block, with a width and a height, give it a background image that's double the width or height of the styled A and set as position 0 0. On the LI A:hover just change the background image position so it shows the other half of the image. It's pretty simple, really. Hit me up in a PM if you get really stuck and I'll help you out.
Just to stir the pot http://battletech.hopto.org/html_tutorials/tristate/ directory unlocked so you can see the bits and pieces. IamBen hit it on the head, don't overcomplicate - though my advice is to toss a sandbag span in (just like the examples stomme poes linked to) and avoid styling the LI. Putting style on the LI can lead to IE headaches via the 'staircase effect' - I just set them to display:inline and avoid doing anything else with them.
No, it's just INCORRECTLY called image sprites by ALA. Sprites are images that move around the screen - while old 8-bit games and many recent games may store their sprites in a single file in the same manner we are discussing, since the image itself does NOT move in our implementations it is not a sprite, just a sliding animation. IF you assigned it position:absolute and started moving it's render box around the screen with javascript (like that stupid falling snowflake script that crops up around the holidays), THEN it's a sprite.
I'm not overcomplicating it I was just seeing if I needed the extra element, for example like you have the SPAN, I have a B tag. The thing is I am only using background images, left corner and right corner, I don't need to cover up the text as I want this to be shown, so is the extra element still required to hold the right edge background image?
If they are going to all be the same width - no. If they are going to all be different widths, yes. At least, until CSS3 is real world deployable. (so figure 8-10 years)
OK cheers, CSS3 better be worth it's wait, nothing should ever take so long as it has done imo especially if proper structures are set up i.e analysis design testing etc......
Lawlz, or just use Safari and pretend the future is here (although I actually don't know how well Safari does it, but it does support more-than-1 background image per element). Make a bunch of menus and play with them until they work. Then make more. It'll become second nature.
Yep i'll always refer to these examples when creating a menu anyways just to make sure, but I like to think i'm getting better at it. Do you follow football Stomme? Good win for the Netherlands yesterday!!
Eh, I'm just basing the timeframe on how long it took for CSS2 to be 'deployable'. The specification for CSS 2 was locked in back in '98, yet nobody considered it real world deployable 4-5 years ago when gecko was an unstable tinker toy NOBODY took seriously except for people stuck on *nix, firefux wasn't even a twinkle in a floss fanboy's eye, konqueror was a joke, and IE6 was the most standards compliant browser to date. (which it was in it's own time - that time just lasted too damned long)
Yeah but it seems there are more standards-aware developers out there, who maybe could demand vendors keep up with day (MS excepted, as their developement time is just too damn slow it seems). wd: while I don't drink enough to watch regular football, I saw some of it at work the next day, since the night of the game I saw some fans walking home. They weren't cheering or being loud or anything, so I assumed we'd lost (and it was against Italians, after all). They must have just been tired. Imagine my surprise! So now we've got these shirts with a lion's face on them, and you can open this flap and turn the lion's mouth open and full of teeth. Google "brulshirt". Goofy football fans... lawlz, a commercial: http://www.youtube.com/watch?v=PWSvUIOprAE&feature=related
Give the <div an id to handle the image swap. Put any other formatting in your class. _____________ <div id=idName></div> ______________ #idName{ background-image:url(../images/test.jpg); } #idName:hover { background-image:url(../images/test2.jpg); } nice and clean
Yeah really? That would probably work but if you try to validate your page you will get an error telling that you cannot use same id for all menu divs. Got it?