Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having troubles positioning images underneath each other...

    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

    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/...te-buttons.png

    Testing the code can be done here:
    http://www.w3schools.com/css/tryit.a...ites_hover_nav

    Thanx in advance.
    Last edited by alaindehertog; 07-31-2010 at 01:28 PM.

  • #2
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, 50 views and not even a single reply... and I was thinking this was an easy task.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •