Image rollovers in CSS
August 13, 2005 11:14 AM Subscribe
I designed a website a while back, and I'm now trying to make it compliant. You can see it here. Do any CSS gurus have menu solutions?
As you can see, the image rollover menu at the top is fairly crude - hacked together with some rather ugly Javascript that sometimes results in broken images. I'd love to do it with CSS, but haven't a clue how. I've looked at tutorials from orderedlist and SuperfluousBanter, but they've only served to confuse. Each 'button' need only have two states, as you can see in the first link - but I'd love to do the whole thing from one file, like this. (By the way, my attempt can be seen here.)
Any help would be most gratefully received! Thanks.
As you can see, the image rollover menu at the top is fairly crude - hacked together with some rather ugly Javascript that sometimes results in broken images. I'd love to do it with CSS, but haven't a clue how. I've looked at tutorials from orderedlist and SuperfluousBanter, but they've only served to confuse. Each 'button' need only have two states, as you can see in the first link - but I'd love to do the whole thing from one file, like this. (By the way, my attempt can be seen here.)
Any help would be most gratefully received! Thanks.
The example from orderedlist is really an advanced case. You should start with a simple single button that changes with a rollover. Then expand that to two buttons, and so on. There are better tutorials that tell you a little more of the how and why of what's going on.
The simplest one-button rollover is shown here: http://wellstyled.com/css-nopreload-rollovers.html.
Then you can try a multi-panel layout, like this: http://www.alistapart.com/articles/sprites/.
Only once you've gotten that working should you move on to a complex curved shape of multiple boxes with different edges (if that's what you had in mind.)
I would advise that you drop all the IE compatibility shit from the CSS when you're first designing this. Use Firefox/Mozilla/Opera/Safari for testing. Once you have it working in a compliant browser, then worry about fixing the IE bugs. But, if you follow the recipe of the above articles it should work in IE without all the hackery you've got in there. I'd say start over using the ALA example, and adapt that to your site.
You might want to review CSS syntax also, the way you're doing it is overly verbose. You never have to repeat the same contents of a style rule more than once because you can combine selectors. For example,
a { foo }
b { foo }
can be condensed into
a, b { foo }
So don't repeat 'foo' a bunch of times if you don't have to. But, that's just a stylistic thing that wouldn't affect functionality.
posted by Rhomboid at 11:55 AM on August 13, 2005
The simplest one-button rollover is shown here: http://wellstyled.com/css-nopreload-rollovers.html.
Then you can try a multi-panel layout, like this: http://www.alistapart.com/articles/sprites/.
Only once you've gotten that working should you move on to a complex curved shape of multiple boxes with different edges (if that's what you had in mind.)
I would advise that you drop all the IE compatibility shit from the CSS when you're first designing this. Use Firefox/Mozilla/Opera/Safari for testing. Once you have it working in a compliant browser, then worry about fixing the IE bugs. But, if you follow the recipe of the above articles it should work in IE without all the hackery you've got in there. I'd say start over using the ALA example, and adapt that to your site.
You might want to review CSS syntax also, the way you're doing it is overly verbose. You never have to repeat the same contents of a style rule more than once because you can combine selectors. For example,
a { foo }
b { foo }
can be condensed into
a, b { foo }
So don't repeat 'foo' a bunch of times if you don't have to. But, that's just a stylistic thing that wouldn't affect functionality.
posted by Rhomboid at 11:55 AM on August 13, 2005
Best answer: I played around with your CSS a little and I think the following should work for you:
posted by Rhomboid at 12:29 PM on August 13, 2005
body { background: #000000; margin: 50px; }Works in FF and IE6, but I didn't really test it thoroughly.
#nav { position: relative; width: 703px; height: 52px; background: url(images/nav.gif); margin: 0; padding: 0; }
#nav li { margin: 0; padding: 0; position: absolute; list-style: none; top: 0; }
#nav li, #nav a { height: 52px; display: block; text-indent: -500px; overflow: hidden; }
#home { left: 0px; width: 66px; }
#band { left: 66px; width: 76px; }
#gigs { left: 142px; width: 43px; }
#musi { left: 185px; width: 56px; }
#gall { left: 241px; width: 62px; }
#msgb { left: 303px; width: 118px; }
#link { left: 421px; width: 48px; }
#cont { left: 469px; width: 234px; }
#home a:hover { background: transparent url(images/nav.gif) -0px -52px no-repeat; }
#band a:hover { background: transparent url(images/nav.gif) -66px -52px no-repeat; }
#gigs a:hover { background: transparent url(images/nav.gif) -142px -52px no-repeat; }
#musi a:hover { background: transparent url(images/nav.gif) -185px -52px no-repeat; }
#gall a:hover { background: transparent url(images/nav.gif) -241px -52px no-repeat; }
#msgb a:hover { background: transparent url(images/nav.gif) -303px -52px no-repeat; }
#link a:hover { background: transparent url(images/nav.gif) -421px -52px no-repeat; }
#cont a:hover { background: transparent url(images/nav.gif) -469px -52px no-repeat; }
posted by Rhomboid at 12:29 PM on August 13, 2005
Response by poster: Thanks Rhomboid -- very helpful indeed! The ALA article managed to sort me out, turns out I was thinking in slightly the wrong way.
posted by xvs22 at 1:39 PM on August 13, 2005
posted by xvs22 at 1:39 PM on August 13, 2005
« Older How do I go about marrying a foreigner? | Boy, dad, canoe, station wagon, wildlife: what... Newer »
This thread is closed to new comments.
posted by jikel_morten at 11:46 AM on August 13, 2005