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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Sprite Issues

    My hair is now all gone! Can someone explain what I am doing wrong here?

    My sprites aren't cooperating with me for some reason.

    Thanks in advance!
    LMW1
    Last edited by lmw1; 05-18-2012 at 10:16 PM.
    Trust everybody. Just don't trust the Devil inside of them.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove the background from the ul and then apply it to the anchors, like
    Code:
    #mainNav li a{
    background:url(/images/navigation_main.png);
    }
    After that set the backgrouns positions specifically to each anchors, for the normal as well as hover states, like
    Code:
    #mainNav #navBio a{
    background-position:-143px -2px;
    }
    #mainNav #navBio a:hover{
    background-position:-143px -120px;
    }
    (..and for the other anchors too)
    Last edited by VIPStephan; 05-18-2012 at 10:21 PM. Reason: removed identifying info upon request
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hmm? It's still a little wacky. And I somehow lost the "Contact" button.

    Any more ideas?

    I appreciate your help!

    Respectfully,
    LMW1
    Trust everybody. Just don't trust the Devil inside of them.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to remove the text-indent from the <li>s first and position the anchors in the desired locations (make sure that there's enough space among them to contain the width of the circle image). Then apply the sprites and adjust them to come well aligned with the text. Then finally bring the text-indent.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    lmw1 (05-18-2012)

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Your advice worked perfectly! Thank you sir!

    Respectfully,
    LMW1
    Trust everybody. Just don't trust the Devil inside of them.


  •  

    Posting Permissions

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