CSS Спрайт показывает только конечное изображение
У меня есть лист спрайта, и я хочу отображать изображения рядом друг с другом, но код отображает только конечное изображение. Таким образом, этот код отображает только Изображение google, но он отображает его правильно (с помощью a: hover), но он не отображает изображения facebook или twitter.
Я знаю, что координаты верны, и если я комментирую google <li>
, Когда я обновляю страницу, отображается только изображение facebook. Я не могу понять, что с ним не так, но мне интересно, имеет ли он какое-то отношение со свойством отображения?
EDIT: вот живой пример того, что происходит: http://jsfiddle.net/Duykb/
<div class="social"><h3>SHARE THIS PAGE</h3>
<ul id="social">
<li class="facebook">
<a href="#" title="Facebook"></a></li>
<li class="twitter">
<a href="#" title="Twitter"></a></li>
<li class="google">
<a href="#" title="Google+"></a></li>
</ul>
</div>
CSS:
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; }
#social {
margin-top: 10px;
display: block;
position:relative;
padding-top: 30px; }
#social li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0; }
#social li, #social a {
height:37px;
display:block; }
ul#social li.facebook a {
background: url('images/social_icons.png') no-repeat -5px -4px;
width: 37px;
height: 37px; }
ul#social li.facebook a:hover {
background: url('images/social_icons.png') no-repeat -5px -42px;
width: 37px;
height: 37px; }
ul#social li.twitter a {
background: url('images/social_icons.png') no-repeat -45px -4px;
width: 37px;
height: 37px; }
ul#social li.twitter a:hover {
background: url('images/social_icons.png') no-repeat -45px -42px;
width: 37px;
height: 37px; }
ul#social li.google a {
background: url('images/social_icons.png') no-repeat -82px -4px;
width: 37px;
height: 37px; }
ul#social li.google a:hover {
background: url('images/social_icons.png') no-repeat -82px -42px;
width: 37px;
height: 37px; }
2 ответа:
Удалены
position: absolute
иtop: 0
из#social li
, а затем добавлены...Затем внесите необходимые изменения в#social li { float: left; width: 37px; }
#social
для правильного расположения на странице.
Я думаю, что все ваши
<li>
сидят друг на друге из-за их абсолютного расположения. Таким образом, Вы имеете дело с проблемой наслоения.Если вы хотите, чтобы все они располагались рядом друг с другом, попробуйте установить ширину для каждого из элементов блока и дать им абсолютное положение с помощью свойств
left:
илиright:
.Правка:
Измените Правило
#social li
на...#social li { margin:0; padding:0; list-style:none; width: 37px; float:left; }