CSS: горизонтальное меню с использованием списка с фоновыми изображениями? - PullRequest
Новая
       173

CSS: горизонтальное меню с использованием списка с фоновыми изображениями?

1 голос
/ 15 мая 2011

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

Я использую Drupal, поэтомувывод HTML не может быть изменен (в любом случае, это не просто), поэтому мой вопрос заключается в том, можно ли и как это сделать, используя приведенный ниже HTML-код: 

<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active">Question</a></li>
<li class="qtab-1"><a href="/bagsmaekken?quicktabs_2=1#quicktabs-2" id="quicktabs-tab-2-1" class="qt_tab active">Lead</a></li>
<li class="qtab-2"><a href="/bagsmaekken?quicktabs_2=2#quicktabs-2" id="quicktabs-tab-2-2" class="qt_tab active">Board</a></li>
<li class="qtab-3 last"><a href="/bagsmaekken?quicktabs_2=3#quicktabs-2" id="quicktabs-tab-2-3" class="qt_tab active">Ready</a></li>
</ul>
</div>

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

ul.quicktabs_tabs li {display:inline; }

#quicktabs-2 li.active a {
  background-image:url(question-active.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:135px;
  padding-right:5px;
}

#quicktabs-2 li.qtab-1 a {
  background-image:url(lead-grey.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
  background-image:url(board.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;   
}
#quicktabs-2 li.qtab-3 a {
  background-image:url(ready-grey.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}

Пока это мой код, и он правильно показывает мои изображения с правильным интервалом между ними, но текст внутри a-href я просто не могу скрыть.Я вполне уверен, что это просто вопрос выбора правильного style-class / id, но я пробовал много разных комбинаций и просто не могу заставить его работать.

Любая помощьбыть очень ценным.Спасибо

Искренне
- Местика

Ответы [ 2 ]

1 голос
/ 15 мая 2011

Если вы хотите скрыть свой текст в своем теге привязки, просто добавьте {text-indent:-9999px}, это переместит ваш текст в -9999px, но скроет ваш текст.Этот метод называется IR - замена изображения

Редактировать: Вот Ссылка , предоставленная @ Faust

0 голосов
/ 15 мая 2011

Похоже, ваша главная задача - заменить текст в ссылке (нет?).

Если у вас есть доступ для изменения текста ссылки, и вам разрешено включать разметку с теми значениями, которые не кодируются HTML-символами,

Затем, окружив текст каждой ссылки интервалами (например: Question -> <span>Question</span>), чтобы каждая строка выглядела как: 

<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active"><span>Question<span></a></li>

... тогда вы можете скрыть текст с помощью этого CSS: 

#quicktabs-2  a span {display:none;}

В противном случае, я думаю, что ваш единственный выход - сделать текст чрезвычайно маленьким и близким к цвету изображений: 

#quicktabs-2  a {font-size:1px;text-decoration:none;color:grey}
...