Как создать упорядоченный список (HTML / CSS) с разными фоновыми изображениями для разных записей? - PullRequest
Новая
       2

Как создать упорядоченный список (HTML / CSS) с разными фоновыми изображениями для разных записей?

0 голосов
/ 05 ноября 2011

У меня настроено это меню навигационной панели с многослойным фоном, поэтому цвет меняется на всплывающих и текущих вкладках. Тем не менее, цветовая схема того, что у меня есть, в основном зелёная, и в этом же списке я хочу сделать следующий «блок» вкладок синим, а третий блок красным. У меня есть больше изображений, готовых к многослойности и прочее, но я не могу заставить себя переопределить фон для каждой записи li, так как главное написано на самом ol. Это только загрузка изображения в "ol # vin a {" и "ol # vin span {"; остальные параметры (при наведении, текущее и т. д.) изменяют только положение фона, поэтому мое многослойное изображение переводится в соответствующее состояние.

Если это поможет, я основал это на этом: http://blixt.org/articles/tabbed-navigation-using-css#section=bonus где у него есть список вкладок, но у меня он идет вертикально вниз по левой стороне с моим собственным фоном.

E: По запросу фрагменты кода: 

<table width="100%" border="0" cellpadding=0 cellspacing=0><tr valign="top">
<td width="260px">
    <ol id="vin">
        <li class="au"><a href="#sc-aaaa"><span>Section A</span></a></li>
        <li class="au"><a href="#sc-bbbb"><span>Section B</span></a></li>
        <li class="au"><a href="#sc-cccc"><span>Section C</span></a></li>
        <li class="au"><a href="#sc-dddd"><span>Section D</span></a></li>
        <li class="au"><a href="#sc-eeee"><span>Section E</span></a></li>
        <li class="au"><a href="#sc-ffff"><span>Section F</span></a></li>
    </ol>
</td><td style="background:#ccc">
    <div class="content" id="sc-aaaa">
        <h2>Section A</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-bbbb">
        <h2>Section B</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-cccc">
        <h2>Section C</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-dddd">
        <h2>Section D</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-eeee">
        <h2>Section E</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-ffff">
        <h2>Section F</h2>
          Content goes here!
    </div>
</td></tr></table>
activatables('section', ['sc-aaaa', 'sc-bbbb', 'sc-cccc', 'sc-dddd', 'sc-eeee', 'sc-ffff']);
</script>
</body>
</html>

и CSS: 

ol#vin {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 16px Verdana, sans-serif;
}

ol#vin li {
    margin: 0 0 0 0;
}

ol#vin a {
    color: #ccc;
    display: block;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
}

ol #vin #au a {background: url(vtabs.png) no-repeat;}
ol #vin #ma a {background: url(vtabs2.png) no-repeat;}

ol#vin a:hover {
    background-position: 0 -52px;
    color: #000;
}

ol#vin a:hover span {
    background-position: 100% -52px;
}

ol#vin li a.active {
    background-position: 0 -26px;
    color: #fff;
    font-weight: bold;
}

ol#vin li a.active span {
    background-position: 100% -26px;
}

ol#vin span {
    display: block;
    line-height: 25px;
    padding-right: 30px;
}

ol#vin #au span {background: url(vtabs2.png) 100% 0;}
ol#vin #ma span {background: url(vtabs2m.png) 100% 0;}

Ответы [ 2 ]

0 голосов
/ 05 ноября 2011

Хм, вы достигнете этого только с помощью решения JavaScript, потому что спецификация CSS не позволяет вам стилизовать родительские элементы. Пример использования jQuery: 

<ul id="nav">
    <li data-color="#00f"><a href="#">Link</a></li>
    <li data-color="#0f0"><a href="#">Link</a></li>
    <li data-color="#f00"><a href="#">Link</a></li>
</ul>

И сценарий: 

var $nav = $("#nav");
$nav.find("li").hover(function () {
    $nav.css("backgroundColor", $(this).attr("data-color"));
}, function () {
    $nav.css("backgroundColor", "");
});
0 голосов
/ 05 ноября 2011

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

Оригинал

Из связанного примера: http://blixt.org/articles/tabbed-navigation-using-css#section=bonus

<ol id="toc">
    <li><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

Решение

HTML 

<ol id="toc">
    <li id="first_li"><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li id="second_li"><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

CSS 

/* Usual states */
#toc li#first_li {
    background-image: url('/img/first_background.jpg');
}

#toc li#second_li {
    background-image: url('/img/second_background.jpg');
}

/* Hover states */
#toc li#first_li:hover {
    background-image: url('/img/first_background_highlight.jpg');
}

#toc li#second_li:hover {
    background-image: url('/img/second_background_highlight.jpg');
}
...