dave shea css sprite rollovers VERTICALLY?

http://64.233.161.104/search?q=cache:http://www.alistapart.com/articles/sprites/


can someone please write me some example code that would use that technique but with vertically aligned images instaead of horizontal (each one being a link as well)?  i can't seem to get it to line up. thanks.
wrynnAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GoofyDawgCommented:
Here's a simple thing to do without using any code examples. First, you'll have to be using Firefox to do this, but bear with me for a moment. Open up Firefox then go to this link: https://addons.mozilla.org/extensions/showlist.php?application=firefox&category=Developer%20Tools&numpg=10&pageid=5. Scroll to the bottom of the page, and add the "Web Developer" extension to FF. Close FF then re-open. Now, go to the example page you provided. In the Web Developer toolbar, click on the "CSS" button to open up the menu. Select "Edit CSS" to open up the CSS for the page. Go down to the line that reads: "#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}" and remove "position:absolute;."

You'll notice that nothing really changes on the page - just a slight shift to the left. But now, when you mouse over the image, only first "sprite" changes. Here's the catch: Move your mouse vertically under the left-hand side of the image, and you'll see the other sprites appearing. So what does this mean to what you want to accomplish? Simply remove the position absolute, then redraw your image in the vertical. Play with the padding and margin of the li's to get the rollover effect.

Now, all that said, what are you trying to accomplish? If it's a menu, there are better ways of doing this. You could try this: http://www.projectseven.com/tutorials/css/uberlinks/

GoofyDawg
mreuringCommented:
wrynn, it seems you've been having a go at it yourself, how about providing us with a link to what you've got so far and we can help you wrap it up?
COBOLdinosaurCommented:
Using back shifts have a number of uses this article is dia a while back migh give you some useful additional information:

http://cd-articles.fateback.com/CSSrollovers.html

Cd&

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GoofyDawgCommented:
I remember that article, but couldn't recall the link. wrynn, Cd&'s article is the thing you need. It's a much more straight-foward approach.

GoofyDawg
wrynnAuthor Commented:
ok ill checkit out in a little bit and give you guys some points.  thanks alot for the help :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.