Использование CSS для стилизации элемента LI с фоновым изображением - PullRequest
Новая
       26

Использование CSS для стилизации элемента LI с фоновым изображением

1 голос
/ 19 сентября 2011

Я пытаюсь использовать вкладки, сгенерированные CSS, чтобы показать активное состояние стрелки под вкладкой. Я пытался расположить изображение для события наведения со свойствами фона, но оно вывело бы изображение за пределы указанных пропорций вкладки.
Это страница: http://thegoodgirlsnyc.com/holly/about. Активная вкладка должна выглядеть следующим образом:

screenshot

Стили CSS следующие: 

#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p

Как мне сделать так, чтобы это изображение отображалось внизу предопределенного фона? Эти вкладки будут включены в несколько мест с различной длиной текста, поэтому они должны использовать только одно изображение.

Ответы [ 2 ]

2 голосов
/ 19 сентября 2011

Из-за фонового изображения с диагональными линиями я сомневаюсь, что можно сделать то, что вам нужно, стилизовав только один тег.

Решением может быть стилизация как LI, так и внутренних тегов A (см.пример, который очень близок к вашему изображению: http://www.litecommerce.com/services.html) или перенос текста привязки в SPAN и стилизация A и внутренних тегов SPAN.

1 голос
/ 19 сентября 2011

Вот HTML и CSS, которые я получил от настройки вашей страницы в Firebug, которая дает желаемый эффект: 

<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
  <a href="#one" class="current" style="background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px;">Featured</a>
</li>

Вы можете преобразовать встроенные стили в соответствующие стили CSS. Вышеуказанная разметка предназначена только для выбранного элемента LI и элемента привязки внутри.

Надеюсь, это поможет вам.

Хорошо, вот обновленная версия для вас, которая должна работать (обратите внимание, вышеупомянутый CSS должен применяться только к выбранному LI и элементу A внутри):

Ваша HTML-разметка 

<ul class="nav">
  <li class="nav-one current"><a href="#one">Services</a></li>
  <li class="nav-two"><a href="#two">Clients</a></li>
</ul>

ПРИМЕЧАНИЕ: class = 'nav-one current ' на выбранном элементе LI вместо элемента A

Ваш НОВЫЙ CSS 

ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }

В вашем селекторе CSS есть ошибка. Должно быть: 

#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }

Вот пример того, что я сделал в Chrome, и результат: Example Style

ПРИМЕЧАНИЕ: Кроме того, похоже, что путь к вашему изображению не разрешается правильно к изображению на вашем сервере, в моем случае это потому, что я указал полный путь к изображению.

ЗАМЕЧАНИЕ: Вы не изменили разметку, чтобы вместо элемента A был класс " current " для элемента LI.

...