CODEWITHSUNDEEP
csssprite
422
422

Reputation: 5770

CSS Positioning help ( sprite )

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

Upvotes: 1

Views: 2778

Answers (2)

Sparky
Sparky

Reputation: 98748

Quote: "...just not sure what I have done wrong."

The problem is that your Twitter <div> is covering your Facebook <div>.

Simply deleting the Twitter <div> gets your Facebook <div> working again...

And if you want side by side <div>, you need to float them.

this is working...

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

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

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/

Upvotes: 3

Related Questions