Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › help with css sprite

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 17, 2011 at 10:00 pm #31283
    cybershot
    Participant

    I am making a sprite for a button on my page. It looks like the button is working fine. I made it like so

    Learn More

    I gave the link a background image and then on hover, I move the image up 55px. All is good. For the text in the link, the “Learn More” I gave it a text-indent of 999px; but it is still showing on the screen. Isn’t it common practice to move it off screen with a large indent?

    January 18, 2011 at 12:12 am #65471
    cybershot
    Participant

    thanks for that.

    One more question.

    I am trying to make a list of contact information. So I made a sprite with a mail, twitter, phone and facebook image. The idea is to show the mail then when they hover over the mail, it moves the sprite to show the hover image. I can’t figure out how to make a link with the hover image. This is what I am trying now


    

    
ul#contactList li span#mail a:link {
    
display: block;
    
background: url(../images/social.png)0 0 no-repeat;
    
width: 200px;
    
height: 32px;
    
}

    I have been trying different things. but the second image keeps showing up. I can’t figure it out.

    January 18, 2011 at 1:04 am #65445
    jamygolden
    Member
    #contactList a{
    
display: block;
    
background: url(../images/social.png) no-repeat 0 0 left top;
    
width: 200px;
    
height: 32px;
    
}
    
#mail:hover{
    
background-position: -15px -20px;
    
}
    
#contactList.phone  a:hover{
    
background-position: -25px -10px;
    
}

    I’ve obviously used random numbers for the background position as I don’t have the sprite.

    January 18, 2011 at 1:17 am #65425
    cybershot
    Participant

    that isn’t working. I thought it might have. It looked close.

    January 18, 2011 at 1:34 am #65426
    cybershot
    Participant

    well, I almost got it working. It’s actually displaying nicely, the only problem is that the image doesn’t change when I am over the link. It only changes when i am over the span


    
#contactList li a {
    
display: block;
    
line-height: 32px;
    
text-decoration: none;
    
color: white;
    
margin-left: 36px;
    
}
    

    
#contactList li span#mail {
    
float: left;
    
display: block;
    
background: url(../images/social.png) no-repeat left top;
    
height: 32px;
    
width: 31px;
    
}
    

    
#contactList li span#mail:hover {
    
float: left;
    
background: url(../images/social.png) no-repeat -32px 0;
    
height: 32px;
    
width: 31px;
    
}
    January 18, 2011 at 2:28 am #65429
    cybershot
    Participant

    http://www.createlucid.com/themes/bigBusiness/images/social.png

    January 18, 2011 at 4:09 am #65432
    TT_Mark
    Member

    It doesn’t change when you are over the link, because you are not telling it to!

    If you look at your CSS code, you have a span:hover, but no a:hover

    January 18, 2011 at 4:40 am #65434
    cybershot
    Participant

    well, I have gone through the code many times over the last few hours. What you saw was just one possible version. I am sure at one time I had the a:hover. I know you need it to make the change. My issue is that I couldn’t get it working that way because of the width properties

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.