Форум Сайтостроение Веб-строительство

Подскажите по стилям css

L
На сайте с 17.05.2013
Offline
88
luckydan
344

Есть список, в котором 2 бекграунда для каждой записи. Каждая запись - ссылка. При наведении на ссылку цвет меняется. Как сделать чтобы цвет менялся и при наведении на сам елемент списка, но не ссылку.(см. скриншот)

Вот мой код:


<div class="rubriki">
<ul>
	<li><a href="#">Транспортные перевозки СРОЧНЫЕ</a></li>
</ul>
</div>
<style>
.rubriki > ul > li{
	display: block;
	background: url("http://site.com/images/btn_rub.png") no-repeat 95% 50%, url("http://site.com/images/bg_rub_li.png") repeat-x bottom;
}
.rubriki > ul > li:hover{	
	background: url("http://site.com/images/btn_rub.png") no-repeat 95% 50%, url("http://site.com/images/bg_li.png") repeat-x bottom #fff;
	color: #fff;
}
.rubriki ul li a{
	color: #444;
}
.rubriki ul li a:hover{
	color: #FFF;
}
</style>
jpg 222.jpg
R
На сайте с 18.12.2009
Offline
92
rerighter
#1

.rubriki ul li:hover a { color: ...

L
На сайте с 17.05.2013
Offline
88
luckydan
#2

Спасибо. А подскажите еще как выравнять в списке бекграунд. Есть следующие стили: 


<style>

.breadcrumbs{

	position: relative;

	display: block;

	float: left;

}

#breadcrumbs{

	margin: 5px 0;

	background:#00FFFF

}

.breadcrumbs ul li{

	display: inline-block;

	zoom:1;

	*display: inline;

	display: -moz-inline-block;

	vertical-align: top;

}

.breadcrumbs ul li.arrow{

	background: url("http://site.com/ru/images/list_stil.png") no-repeat bottom;

	height: 12px;

	width: 12px;

	margin:0 5px;

}

</style>

<div class="breadcrumbs" id="breadcrumbs">

								<ul>

									<li><a href="#" title="#">Главная</a></li>

									<li class="arrow"></li>

									<li>новости</li>

								</ul>	

							</div>

Как выравнять бекграунд по низу?

jpg 222.jpg
Кофейник
На сайте с 11.07.2009
Offline
78
Кофейник
#3 

.breadcrumbs ul li.arrow{ 
    background: url("http://site.com/ru/images/list_stil.png") no-repeat bottom; 
    height: 12px; 
    width: 12px; 
    margin:0 5px; 
position:relative;
top:5px; // или сколько-то около того
}

Вам не бекграунд нужно выровнять, а сам элемент.

http://immater1um.livejournal.com/ (http://immater1um.livejournal.com/)
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#4
Кофейник:
.breadcrumbs ul li.arrow{ 
    background: url("http://site.com/ru/images/list_stil.png") no-repeat bottom; 
    height: 12px; 
    width: 12px; 
    margin:0 5px; 
position:relative;
top:5px; // или сколько-то около того
}

Вам не бекграунд нужно выровнять, а сам элемент.

Не правильно..

Вот правильный вариант:


.breadcrumbs ul li.arrow{
    background: url("http://site.com/ru/images/list_stil.png") left center no-repeat;
    height: 12px;
    width: 12px;
    margin:0 5px;
}
L
На сайте с 17.05.2013
Offline
88
luckydan
#5

Что-то опять запутался с вертикальным выравниванием. Все уже перепробовал - никак не получается маркер в списке с текстом выравнять.. Подскажите что не так. Вот код и скриншот: 


<div class="menu2">

<ul>

<li><a href="#">11111111</a></li>

<li><a href="#">2222222</a></li>

<li><a href="#">33333333</a></li>

</ul>

</div>

<style>

.menu2{	

	position: absolute;

	margin-top: 12px;

	display: none;

}

.menu2 > ul{

	z-index: 30;

	position: relative;

}

.menu2 > ul > li{

	position: relative;

	padding:0 10px 0 0px;

	opacity: 0.9;

	float: left;

	margin-left: 30px;

        top:4px;

	list-style-image: url("http://site.com/images/btn_right.png");

}

.menu2 > ul > li > a{

	font-size: 12px;

	color: #fff;

	top:-5px;

	text-decoration: none;

}

</style>
jpg 222.jpg
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#6

Откройте для себя line-height

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий