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

Как задать стиль для тега <ul> в виджете?

Art7ice
На сайте с 20.07.2012
Offline
32
Art7ice
948

Доброго времени суток.

Собственно, вопрос в заголовке. В css для всех тегов <ul> задано вот такое оформление:

ul, ol {
	margin: 0 0 1.5em 3em;
}

Но это оформление срабатывает не только в статьях, но и везде, в том числе и в виджетах. Собсно, для виджетов css таково:

.widget ul { /* Unordered lists inside widgets */
	list-style: none !important;
	list-style: margin:5px !important;

}
.widget ul li { /* Unordered list items inside widgets */
	border-top: 1px solid #e5e5e5;
	list-style: none !important;
	list-style: margin:5px !important;
}
.widget ul li a{
	list-style: none !important;
	font-size: 13px;
	display: block;
	padding: 10px 0 10px 15px;
	margin-left: 15px ;
	margin-right: 10px !important;
}
.widget ul li:hover > a{
	list-style: none !important;
	color: #f4f4f4;
	background-color: #669900;

Как можно убрать margin в для тега <ul> в виджете?

Как я понимаю, надо задать ему id, а потом в css определить ему стиль?

Или это можно сделать сразу в уже существующем разделе css, как в случае с маркерами, которые я убрал с помощью "list-style: none"?

К примеру, в просмотре кода элемента в хроме я задаю для этого <ul> следующее оформление: 

<ul style="margin-left: 5px;margin-bottom: 5px;"></ul>
Все норм форматируется, но возникает вопрос - куда это все прилепить?
Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#1

Art7ice, можно убрать important, если описанные стили будут в коде ниже, чем общие

Плюс более конкретизированные стили (.widget ul) имеют более высокий приоритет чем более общие (ul)


	list-style: margin:5px !important;

wtf?) list-style лишний

//TODO: перестать откладывать на потом
Art7ice
На сайте с 20.07.2012
Offline
32
Art7ice
#2

Спасибо, почистил код, привел его в следующее состояние:

.widget ul { /* Unordered lists inside widgets */
}
.widget ul li { /* Unordered list items inside widgets */
	border-top: 1px solid #e5e5e5;
	list-style: none;
}
.widget ul li a{
	font-size: 13px;
	display: block;
	padding: 10px 0 10px 15px;
}
.widget ul li:hover > a{
	color: #f4f4f4;
	background-color:#669900;
}

Однако вопрос остается все тем-же. В какой из первых трех .widget запилить оформление для <ul>? И каким образом это сделать?

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#3 


.widget ul { /* оформление для списка ul */
list-style: none;
margin:5px;
...прочие стили...
}
.widget ul li { /* оформление для каждого li в ul*/
...прочие стили...
}
.widget ul li a{ /* оформление для каждой ссылки в li в ul */
...прочие стили...
}
.widget ul li:hover > a{ /* оформление для каждой ссылки в li в ul при наведении на li */
...прочие стили...
}
Art7ice
На сайте с 20.07.2012
Offline
32
Art7ice
#4

Еще раз благодарю. Проблема решилась банальной допиской .widget ul { margin-left: 5px; бла-бла-бла;}

Когда прописывал стили в уже существующие .widget ul, css почему-то не подхватывались.

K
На сайте с 03.06.2015
Offline
45
kostyanet
#5
Art7ice:
Проблема решилась банальной допиской

По-другому и не получится, это баян, конечно. Как поменять глобальные стили? - Так и поменять глобальные стили. Берешь да меняешь в стилях.

MYSQL PHP JS HTML CSS SEO TXT США СССР
Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#6
kostyanet:
Как поменять глобальные стили? - Так и поменять глобальные стили. Берешь да меняешь в стилях.

Глобальные стили можно переопределить локальными. Так, кстати, меньше вероятность что изменения слетят при обновлении

K
На сайте с 03.06.2015
Offline
45
kostyanet
#7

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

---------- Добавлено 20.08.2015 в 16:22 ----------

Причем сделать это можно несколькими способами. Например самый неприятный случай, когда у нас есть виджет с условно закрытым кодом, то есть такой, который мы не должны править. Обычно такие в древних цмсках. Как поменять оформление? Ну конечно, вывести виджет внутри обертки, для которой написать все необходимые изменения с учетом выросшего дерева селекторов.

было


<div class="widget"> туева хуча тегов виджета </div>

стало



<style>
div.widget-foo div.widget ul li a{
   text-decoration:none;
}
</style>

<div class="widget-foo">
   <div class="widget">туева хуча тегов виджета </div>
</div>
Как запретить вывод блока санкции за многократное употребление Как определить, в каком

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