Заголовки В Списках

Deacon · August 24, 2008

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

Семантически такое допустимо/правильно или не вкоем случае?

<ul>
<li><h3><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></h3></li>
<li><h4><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></h4></li>
<li><h5><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></h5></li>
<li><h6><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></h6></li>
<li><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></li>
</ul>

В общем можно так делать или лучше просто задать параметры шрифта отдельно для каждого элемента li?

Если у кого ещё есть какие конструктивные мысли, то милости просим излагать.

Edited August 24, 2008 by Deacon

rus · August 24, 2008

можно в стилях прописать li a { font-size: 14px; }

rash · August 24, 2008

Семантически, ИМХО, это плохо.

Я бы, может, вообще поколдовал над тегами <small> и <big> в этой ситуации

Джин · August 25, 2008

может конечно не в тему. но я бы так сделал (но это на php)

<ul>
<?
   $i = 1;
   while(++$i <= 6)
   {
	  ?>
	  <li><h<?=$i;?>><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></h<?=$i;?>></li>	
	  <?  
   }
?>
</ul>

Edited August 25, 2008 by Джин

Иван Шумов · August 25, 2008

Ребята, все неправы

1) Да, h* заголовки тут никакой роли - только мусор

2) а зачем вообще списки?


<div id="news">
<a class="n1">asdasd</a>
<a class="n2">asdasd</a>
<a class="n3">asdasd</a>
<a class="n4">asdasd</a>
<a class="n5">asdasd</a>
</div>

<style>
#news a {display: block; /*ну и что там для их выравнивания*/}
.n1 {font-size:16px;}
.n2 {font-size:15px;}
.n3 {font-size:14px;}
.n4 {font-size:13px;}
.n5 {font-size:12px;}
</style>

собственно посолить и поперчить по вкусу

rash · August 25, 2008

Просто люблю я кучки ссылок оформлять списками - к примеру мобильные устройства покажут посимпатичнее.

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

yopopt · August 25, 2008

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

И я того же мнения.

Deacon · August 25, 2008

Как-никрути это именно ссылки.

Челу спасибо за php кусок. Пригодится! Вежь тут как раз php в итоге и будет задействовано.

Как кстати в php перевести такое поможет кто?

<ul>
	<li><big><big><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></big></big></li>
	<li><big><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></big></li>
	<li><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></li>
	<li><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></li>
</ul>

Кроме <big> варианты остались какие-нибудь ещё?

Иван Шумов · August 25, 2008

Как-никрути это именно ссылки.
Челу спасибо за php кусок. Пригодится! Вежь тут как раз php в итоге и будет задействовано.
Как кстати в php перевести такое поможет кто?
<ul>
	 <li><big><big><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></big></big></li>
	 <li><big><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></big></li>
	 <li><big><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></big></li>
	 <li><big><a href="#">sdfsdfsdfdfsddsfsdfsdf dfdsdf sdfsdf</a></big></li>
 </ul>
Кроме <big> варианты остались какие-нибудь ещё?

ИЗВРАТ!!!!!!!!!!!!

Dimitry Wolotko · August 25, 2008

И правда - ппц.

Deacon · August 25, 2008

Предложи как лучше. Как раз и интересуюсь альтернативными вариантами.

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

Edited August 25, 2008 by Deacon

Dimitry Wolotko · August 25, 2008

Выше дали скрипт - немного поправь его (измени первый шаг, и ширину шага) и юзай.

Джин · August 25, 2008

Deacon, а зачем тебе с big извращаться? предыдущий способ делал тоже самое, но был посимпатичнее...

тут немного поколдовал с тем что дал Иван Шумов и вот что получилось.

<style>
#news a {font-family: Arial; display: block; background: url(/img/3.gif) no-repeat left center; padding-left:18px;}
.n1 {font-size:16px;}
.n2 {font-size:15px;}
.n3 {font-size:14px;}
.n4 {font-size:13px;}
.n5 {font-size:12px;}
</style>

<div id="news">
<?
   $i = 0;
   while(++$i <= 5)
   {
		?>
	  <a href="#" class="n<?=$i;?>">Последняя тема с форума N<?=$i;?></a>
	   <?	  
   }
?>
</div>

"/img/3.gif" - вместо этого пропишите путь к какому-нибудь маленькому рисунку размерами примерно 15X15

Deacon · August 25, 2008

Чёт скрипт темы не множит, только одна высвечивается.

Edited August 25, 2008 by Deacon

Victor Ananiev · August 25, 2008

Чёт скрипт темы не множит, только одна высвечивается.

<a href="#" class="<? echo("n".$i); ?>">Последняя тема с форума N<? echo("=".$i); ?></a>

Куча ошибок в одной строке)

Edited August 25, 2008 by Vindex10

Deacon · August 25, 2008

А так множит, но почему-то берёт с другого списка значения.((

Edited August 25, 2008 by Deacon

Джин · August 25, 2008

Чёт скрипт темы не множит, только одна высвечивается.

странно. у меня все отлично работает.

Куча ошибок в одной строке)

не вижу здесь ошибку.

а даже если бы и это была ошибка, то всего одна в двух местах, а не "Куча"

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

Edited August 25, 2008 by Джин

Victor Ananiev · August 25, 2008

не вижу здесь ошибку.
а даже если бы и это была ошибка, то всего одна в двух местах, а не "Куча"

Ладно-ладо...)))

А так множит, но почему-то берёт с другого списка значения.((

А что означает с другого списка?? Была задача, выпустить список и чем выше заголовок, тем он больше, вроде все четко) Это не в скрипте дело)

Edited August 25, 2008 by Vindex10

Deacon · August 25, 2008

Vindex10

Было так:

стало так

Тэги как-то не так закрываются, но в коде вроде всё закрыто.

У меня основное меню ещё в html-файле, но видимо трабла какая-то с закрытием-открытием тэгов в php-коде. Я просто php минимально секу. Найти не могу проблемы.

Edited August 25, 2008 by Deacon

Джин · August 25, 2008

скопируй весь свой файл или выложи его для скачки

Victor Ananiev · August 25, 2008

Может скопировал чего не так?

видимо трабла какая-то с закрытием-открытием тэгов в php-коде. Я просто php минимально секу. Найти не могу проблемы.

Вот тебе блок у меня с ним все работает, не в нем ошибка):

<div id="news">
<?
   $i = 0;
   while(++$i <= 5)
   {
		?>
	  <a href="#" class="<? echo("n".$i); ?>">Последняя тема с форума N<? echo("=".$i); 

?></a>
	   <?	  
   }
?>
</div>

Edited August 25, 2008 by Vindex10

Deacon · August 25, 2008

Вот мой файл без кода php, а с кодом появляются траблы. Проверьте как у вас.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0; border:0;}

		body {font: 62.5%/1.4 Arial, sans-serif; background-color: black; color:AntiqueWhite;}

		.n1 {font-size:250%;}
		.n2 {font-size:220%;}
		.n3 {font-size:190%;}
		.n4 {font-size:160%;}
		.n5 {font-size:130%;}

		a {color:AntiqueWhite;}

		ul {list-style:none;}

		#wrap {min-width:1000px; width:expression(document.body.clientWidth > 1000 ? "100%" : "1000px")}

		  #wrap #header {position:relative; width:100%;}
			  #navigation {position:absolute; top:8px; width:100%; float:right; text-align:center;}
					  #navigation ul {float:left; width:100%;}
						  #navigation ul li {float:left; width:14%; text-align:center;}
							  #navigation ul li a {display:block; float:left; width:100%; font:bold 150% Arial,sans-serif; text-decoration:none;}
							  #navigation ul li a:hover {font:normal 200% Arial,sans-serif;}
		  #recent {position:absolute; top:84px; width:90%; margin:0 5% 0;}				   
			  #recent #gigs {float:left; width:45%;}

			  #recent #topics {margin-left:55%;}

	</style>

</head>

<body>
<div id="wrap">

<div id="header" style="border: 0px dashed green;">

<div id="recent" style="border: 0px dashed green;">

<div id="gigs" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<ul>
	<li><a class="n1" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n2" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n3" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n4" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n5" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
</ul>

</div><div style="float:left; width:10%; border: 0px dashed green;"></div>

<div id="topics" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<ul>
	<li><a class="n1" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n2" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n3" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n4" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n5" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
</ul>

</div>

</div>

<div id="navigation" style="border: 0px dashed red;">

<ul style="border: 0px dashed green;">
	<li><a href="#">Публикации</a></li>
	<li><a href="#">Афиша</a></li>
	<li><a href="#">Галерея</a></li>
	<li><a href="#">Форум</a></li>
	<li><a href="#">Группы</a></li>
	<li><a href="#">Загрузка</a></li>
	<li><a href="#">Ссылки</a></li>
</ul>

</div>

</div>

</div>
</body>
</html>

Edited August 25, 2008 by Deacon

Джин · August 25, 2008

чет я нифига не понял... а где ты скрипт использовал? О_о

Deacon · August 25, 2008

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

Вот тоже самое со скриптом, сам скрипт внизу над блоком #navigation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0; border:0;}

		body {font: 62.5%/1.4 Arial, sans-serif; background-color: black; color:AntiqueWhite;}

		.n1 {font-size:250%;}
		.n2 {font-size:220%;}
		.n3 {font-size:190%;}
		.n4 {font-size:160%;}
		.n5 {font-size:130%;}

		a {color:AntiqueWhite;}

		ul {list-style:none;}

		#wrap {min-width:1000px; width:expression(document.body.clientWidth > 1000 ? "100%" : "1000px")}

		  #wrap #header {position:relative; width:100%;}
			  #navigation {position:absolute; top:8px; width:100%; float:right; text-align:center;}
					  #navigation ul {float:left; width:100%;}
						  #navigation ul li {float:left; width:14%; text-align:center;}
							  #navigation ul li a {display:block; float:left; width:100%; font:bold 150% Arial,sans-serif; text-decoration:none;}
							  #navigation ul li a:hover {font:normal 200% Arial,sans-serif;}
		  #recent {position:absolute; top:84px; width:90%; margin:0 5% 0;}				   
			  #recent #gigs {float:left; width:45%;}

			  #recent #topics {margin-left:55%;}

	</style>

</head>

<body>
<div id="wrap">

<div id="header" style="border: 0px dashed green;">

<div id="recent" style="border: 0px dashed green;">

<div id="gigs" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<ul>
	<li><a class="n1" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n2" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n3" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n4" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n5" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
</ul>

</div><div style="float:left; width:10%; border: 0px dashed green;"></div>

<div id="topics" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<ul>
	<?
   $i = 0;
   while(++$i <= 5)
   {
		?>
	  <li><a href="#" class="<? echo("n".$i); ?>">Последняя тема с форума N<? echo("=".$i); 

?></a></li>
	   <?	  
   }
?>
</ul>

</div>

</div>

<div id="navigation" style="border: 0px dashed red;">

<ul style="border: 0px dashed green;">
	<li><a href="#">Публикации</a></li>
	<li><a href="#">Афиша</a></li>
	<li><a href="#">Галерея</a></li>
	<li><a href="#">Форум</a></li>
	<li><a href="#">Группы</a></li>
	<li><a href="#">Загрузка</a></li>
	<li><a href="#">Ссылки</a></li>
</ul>

</div>

</div>

</div>
</body>
</html>

Edited August 25, 2008 by Deacon

Джин · August 25, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0; border:0;}

		body {font: 62.5%/1.4 Arial, sans-serif; background-color: black; color:AntiqueWhite;}

		#news a {font-family: Arial; display: block; background: url(/img/3.gif) no-repeat left center; padding-left:18px;}

		.n1 {font-size:250%;}
		.n2 {font-size:220%;}
		.n3 {font-size:190%;}
		.n4 {font-size:160%;}
		.n5 {font-size:130%;}

		a {color:AntiqueWhite;}

		ul {list-style:none;}

		#wrap {min-width:1000px; width:expression(document.body.clientWidth > 1000 ? "100%" : "1000px")}

		  #wrap #header {position:relative; width:100%;}
			  #navigation {position:absolute; top:8px; width:100%; float:right; text-align:center;}
					  #navigation ul {float:left; width:100%;}
						  #navigation ul li {float:left; width:14%; text-align:center;}
							  #navigation ul li a {display:block; float:left; width:100%; font:bold 150% Arial,sans-serif; text-decoration:none;}
							  #navigation ul li a:hover {font:normal 200% Arial,sans-serif;}
		  #recent {position:absolute; top:84px; width:90%; margin:0 5% 0;}				   
			  #recent #gigs {float:left; width:45%;}

			  #recent #topics {margin-left:55%;}

	</style>

</head>

<body>
<div id="wrap">

<div id="header" style="border: 0px dashed green;">

<div id="recent" style="border: 0px dashed green;">

<div id="gigs" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<ul>
	<li><a class="n1" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n2" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n3" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n4" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
	<li><a class="n5" href="#">dfgsdfgsfdg dfgs dfsf sdfg sdfg sdfsfd h</a></li>
</ul>

</div><div style="float:left; width:10%; border: 0px dashed green;"></div>

<div id="topics" style="border: 0px dashed red;">

<h2>Последние темы форума</h2>

<div id="news">
<?
   $i = 0;
   while(++$i <= 5)
   {
		?>
	  <a href="#" class="n<?=$i;?>">Последняя тема с форума N<?=$i;?></a>
	   <?	  
   }
?>
</div>

</div>

</div>

<div id="navigation" style="border: 0px dashed red;">

<ul style="border: 0px dashed green;">
	<li><a href="#">Публикации</a></li>
	<li><a href="#">Афиша</a></li>
	<li><a href="#">Галерея</a></li>
	<li><a href="#">Форум</a></li>
	<li><a href="#">Группы</a></li>
	<li><a href="#">Загрузка</a></li>
	<li><a href="#">Ссылки</a></li>
</ul>

</div>

</div>

</div>
</body>
</html>

вот рабочий вариант с применением скрипта.

кстати, то что ты написал тоже работает. О_о

а ты где проверяешь код? и расширение поставь у файла *.php если не поставил

Edited August 25, 2008 by Джин

Deacon · August 25, 2008

ага

Edited August 25, 2008 by Deacon

Sign In

Заголовки В Списках

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information