CSS спрайт проблема, испортить макет - PullRequest
Новая
       3

CSS спрайт проблема, испортить макет

0 голосов
/ 13 ноября 2010

Я пытаюсь обновить код для использования спрайтов CSS.В некоторых ситуациях он работает нормально, в других он портит макет страницы, и я не могу понять, что я делаю неправильно.

Вот фрагмент HTML .... 

  <div id="footer"><!-- footer -->
  <div class="footer-top">
   <div class="footer-left">
    <div class="footer-right">
     <a href="/index.php" id="footer-logo"><img src="footer-logo.gif" /></a>

     <br /><br />
     <div>
<p>blah blah blah</p>

     <div class="clearfloat"></div>
    </div>
   </div>
  </div>
  </div>

... и CSS: 

.footer-left {
        background: url(/images//footer-left_.gif) no-repeat left top;
}

Я создал свой спрайт и попытался изменить CSS на: 

.footer-left {

      background:url('/images/sprites.gif')  -66px -2px no-repeat;
      width:20px;
      height:99px;
}

Размеры и смещения верны, но результат не симпатичный.Область спрайта отображается примерно в нужном месте, но footer-logo.gif и текст

перепутаны.

Есть идеи, пожалуйста?

1 Ответ

0 голосов
/ 13 ноября 2010

Единственное, что влияет на логотип и текст, это размеры, которые вы добавили; вы устанавливаете width нижнего колонтитула на 20px, и если этого раньше не было, это определенно влияет на текст bla bla bla и .footer_right.

Обратите внимание, что .footer_right и текст находятся внутри вашей 20px ширины footer_left.

Вы уверены, что ваша вложенная div структура верна?

...