Навигация по изображениям с использованием текстового отступа - PullRequest
Новая
       19

Навигация по изображениям с использованием текстового отступа

0 голосов
/ 13 февраля 2009

Я пытаюсь создать простую навигацию по изображениям для своего сайта, используя CSS для объявления свойства background-image элемента list (li). Проблема в том, что когда я использую text-indent, чтобы вывести изображение за пределы экрана, ссылка больше не появляется (я полагаю, за пределами экрана). Любая помощь будет принята с благодарностью. Вот мой XHTML: 

<div id="nav">
  <ul>
    <li class="current about">
      <a href="#about" title="about">about</a>
    </li>
    <li class="contact">
      <a href="#contact" title="contact">contact</a>
    </li>
    <li class="networks">
      <a href="#networks" title="networks">networks</a>
    </li>
  </ul>
</div>

Вот мой CSS: 

#nav li {
   display: block;
   float:left;
   background-image: url("images/nav-normal.png");
   height:47px;
   text-indent: -9999px;
}

Я также установил фоновые позиции для отдельных элементов списка, потому что я использую спрайты изображений . Заранее спасибо!

1 Ответ

3 голосов
/ 13 февраля 2009

Примените этот стиль к #nav li a. В противном случае все внутри li, включая ссылку, будет смещено с экрана.

...