6 августа 2013 в 13:01
Доброго времени суток!
Пытаюсь оптимизировать изображения на сайте с помощью css sprites. Начал с кнопок социальных сетей.
Создал объединенное изображение social.png, закинул в папку images своей темы.
Закинул в файл шаблона node.tpl.php такой код:
Прописал в style.css такие правила:
ul#social {
left: 250px;
position: absolute;
top: 9px;
}
ul#social li {
background-image: url(../images/social.png) no repeat;
float: left;
height: 45px;
width: 45px;
}
ul#social li a {
display: block;
height: 100%;
width: 100%;
}
ul#social li#vk {
{ background-position: 0 0;
}
ul#social li#od {
{ background-position: -50 0;
}
ul#social li#ms {
{ background-position: -100 0;
}
ul#social li#fd {
{ background-position: -150 0;
}
ul#social li#gplus {
{ background-position: -200 0;
}
ul#social li#tw {
{ background-position: -250 0;
}
Проблема в том что не отображается изображение social.png Вместо него идут просто черные точки списка.
Может кто подскажет что я делаю не так.
Заранее спасибо.
Комментарии
list-style: none outside none;, а вообще пользуйтесь файрбагом.
Соц. кнопки - share42
background-position: -250px
и ссылки через l() выводить надо.
Спасибо за советы. Помогло как раз
list-style: none outside none
хотя и сервис не плох, но обошелся без него. Ставлю РЕШЕНО.
Спасибо за советы. Помогло как раз
list-style: none outside none
хотя и сервис не плох, но обошелся без него. Ставлю РЕШЕНО.