CSS Positioning help (спрайт) - PullRequest
Новая
       0

CSS Positioning help (спрайт)

1 голос
/ 23 июня 2011

Я создал скрипку здесь:

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

Каким-то образом (имейте в виду, это 4:30 утра) Я поднял эффект наведения на ссылку Facebook ..

Твиттер один работает ... просто не уверен, что я сделал не так.

Любая помощь приветствуется, я устал LOL.

Для итерации:

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;
}

Приветствия

Нужен спрайт в твиттере и фейсбуке, чтобы он располагался горизонтально в центре главного элемента

Ответы [ 2 ]

3 голосов
/ 23 июня 2011

Что вам нужно сделать, это float ваш divs, чтобы они не закрывали друг друга.

Вот несколько упрощенных CSS. Отредактируйте margin s при необходимости. 

#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

Вы можете еще больше упростить свой CSS следующим образом: 

#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/

0 голосов
/ 23 июня 2011

Цитата: "... просто не уверен, что я сделал неправильно."

Проблема в том, что ваш Twitter <div> покрывает ваш Facebook <div>.

Простое удаление Twitter <div> заставляет ваш Facebook <div> снова работать ...

А если вы хотите, чтобы бок о бок <div>, вам нужно отпустить их.

это работает ...

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

...