Помогите с отступом в популярных новостях.

[Danila 8]

Хочу сделать отступ между популярными новостями в списке, тег {topnews}.

В main.tpl класс назначил:

<td colspan="3" align="left" class="popnews">{topnews}</td>

В css вставил:

.popnews {

	padding: 10px 10px 0px 10px;

	color: #333333;

	font-size: 11px;

	font-family: tahoma;

	text-decoration: none;

}

.popnews a:active, 

.popnews a:visited,

.popnews a:link {

	padding: 10px 10px 0px 10px;

	color: #333333;

	text-decoration: none;

}

.popnews a:hover {

	padding: 10px 10px 0px 10px;

	color: #ca0000;

	text-decoration: underline;

}

Причем цвета отображаются правильно, согласно стилю, нижнее подчеркивание тоже появляется когда надо. А вот padding почему-то не пашет... В чем может быть проблема?

[Greeze 0]

Свойства padding и margin работают только на блочных (<div>) элементах, когда как элемент <a> является inline'овым.

Могу предложить два пути решения этой проблемы.

1. Можно сделать <a> блочным элементом:

a {display:block;}

и задать ему свойства отступа:

a {display:block; padding:5px 0 0 0;}

но по условию задачи мы не может редактировать html код, остается проблема двойного отступа из-за тега <br>, т.к. стандартный вывод похожих новостей имеет примерно такой вид:

<a href="/">Сссылка</a><br>

<a href="/">Сссылка</a><br>

<a href="/">Сссылка</a><br>

<a href="/">Сссылка</a><br>

<a href="/">Сссылка</a><br>

это можно решить одним нестандартным трюком дописываем в css:

br {display:none;}

Таким образом все переносы строк аннулируются и страница отображается так, когбуд-то тега <br> там никогда не было. Не забудьте {related-news} поместить в отдельный блок (<div>), иначе <br> перестанет отображатся на всем сайте 2. Можно просто добавить свойство line-height элементу <a>:

a {line-height:20px;}

подставляем вместо "20" нужное значение.

Таким образом мы меняем высоту строки до нужного нам значения.

Первый метод оригинален, зато второй крайне прост.

Дерзайте

[Danila 8]

Спасибо, только вот вопрос есть один. Ведь если я изменю настройки стиля для ссылки "a", то тогда все ссылки будут с отступами, что крайне не удобно. Т.к. ссылки используются не только в теге topnews, и не только в похожих новостях... Вся навигация построена на них... Как-то можно обойти это, сделав только в одном месте ссылки с отступами (конкретно в теге topnews)?

Мысль... Вывод формируется в каком-то файле (возможно в topnews.php)? Может сам вывод сделать уже с отступами, а не применять стиль на все ссылки? Только не знаю где копать...

[lifestar 18]

Как-то можно обойти это, сделав только в одном месте ссылки с отступами (конкретно в теге topnews)?

вот так:

.popnews a {	

	color: #333;

	line-height:20px;

	text-decoration: none;

}

.popnews a:hover {

	color: #ca0000;

	text-decoration: underline;

}

Изменено 25 декабря 2007 пользователем lifestar

[Danila 8]

Благодарю!

[Greeze 0]

писал об этом выше.

Не забудьте {related-news} поместить в отдельный блок (<div>), иначе <br> перестанет отображатся на всем сайте

создайте новый блок и поместите в него {related-news}

<div id="related-links">{related-news}</div>

и в css:

#related-links a {display:block; padding:5px 0 0 0;}

тоже самое с <br> или "line-height".