Question

I have created a fiddle here:

http://jsfiddle.net/ozzy/77dJz/

Somehow ( mind you its 4:30am ) I have cocked up the hover effect on facebook link..

Twitter one works… just not sure what I have done wrong.

Any help appreciated, I am tired lol.

To Iterate:

CSS:

#facebook {
    background:url('../images/socialsprite.png') no-repeat scroll 0px 0px transparent;
    height:40px;
    width:180px;
    margin-left:10px;
    margin-top:30px;
}
#facebook:hover {
    background:url('../images/socialsprite.png') no-repeat scroll 0px -40px transparent;
    height:40px;
    width:180px;
}
#twitter {
    background:url('../images/socialsprite.png') no-repeat scroll -180px 0px transparent;
    height:40px;
    width:180px;
    margin-left:210px;
    margin-top:-40px;
}
#twitter:hover {
    background:url('../images/socialsprite.png') no-repeat scroll -180px -40px transparent;
    height:40px;
    width:180px;
}

Cheers

Need twitter and facebook sprite to sit side by side horizontally centered in the master div

Answer 1

What you need to do is float your divs so they don’t cover each other.

Here is some simplified CSS. Edit the margins as needed.

#facebook {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll 0px 0px transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;     
}
#facebook:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll 0px -40px transparent;
}
#twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll -180px 0px transparent;
height:40px;
width:180px;
float:right;
margin:25px 10px;    
}
#twitter:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll -180px -40px transparent;
}

http://jsfiddle.net/jasongennaro/77dJz/3/

EDIT

You could further simplify your CSS as follows:

#facebook, #twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png') no-repeat scroll transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;     
}
#facebook:hover {
background-position:0px -40px;
}

#twitter {
background-position:-180px 0px;
float:right;
}
#twitter:hover {
background-position: -180px -40px;
}

http://jsfiddle.net/jasongennaro/77dJz/4/