Having troubles positioning images underneath each other...

alaindehertog

07-31-2010, 11:32 AM

Hi there, I wrote some code to get some buttons working using a sprite.
Everything works perfectly when I display them horizontally next to each other. What I'm trying to do is putting buttons underneath each other...

It should behave like they do right now on my site: http://www.ilictronix.com
so From:
Home | Email
to:
Home
Email

But I don't like mapping and want to get the same result with sprites

Help would be appreciated, because this doesn't look like it's such a hard problem :p

CODE:

<html>
<head>
<style type="text/css">

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist a{height:40px;display:block;}

#home{left:0px;width:160px;}
#home{background:url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') 0 0;}
#home a:hover{background: url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') 0 -40px;}

#email{left:160px;top:40px;width:160px;}
#email{background:url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') -160px 0;}
#email a:hover{background: url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') -160px -40px;}

</style>
</head>

<body>

<ul id="navlist">
<li id="home"><a href="http://www.ilictronix.com"></a></li>
<li id="email"><a href="mailto: prezjordan@ilictronix.com"></a></li>
</ul>

</body>
</html>

My sprite can be found here: http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png

Testing the code can be done here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

Thanx in advance.

alaindehertog

07-31-2010, 07:55 PM

Wow, 50 views and not even a single reply... and I was thinking this was an easy task.

alaindehertog

07-31-2010, 08:39 PM

OK, found the answer myself, for everybody who wants to know how I solved the issue:

CODE:
CODE:

<html>
<head>
<style type="text/css">

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;left:0;}
#navlist a{height:40px;display:block;}

#home{top:0px;width:160px;}
#home{background:url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') 0 0;}
#home a:hover{background: url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') 0 -40px;}

#email{top:40px;width:160px;}
#email{background:url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') -160px 0;}
#email a:hover{background: url('http://ilictronix.com/staff/mrbrown/images/sprite-buttons.png') -160px -40px;}

</style>
</head>

<body>

<ul id="navlist">
<li id="home"><a href="http://www.ilictronix.com"></a></li>
<li id="email"><a href="mailto: prezjordan@ilictronix.com"></a></li>
</ul>

</body>
</html>

just had to play with the top and left handlers.