Навигация с дополнительным текстом

unquaker · January 1, 2011

Делаю навигацию для сайта.

Оформляю ее как список.

Когда в код вставляю описание ссылок (т.е. все, что на рисунке отмечено серым цветом), то навигация становится не горизонтальной, а вертикальной. Перенос текста делал тегом <br />.

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

Премного благодарен за ответы.

Картинка:

Temiks · January 1, 2011

как то так

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	ul {
		width: 200px;
		display: inline-table;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
}
li {
	padding-top: 15px;
}

	</style>
  </head>
  <body>
	  <ul>
		  <li>
			  rgjm fkojmhkghkojmkm
		  </li>
		  <li>
			  tiojbiji0hjijiojoikio
			  hjgiojiojgijinihgiojiojiogjijiojijg
			  hgok9uhik9iuki0kikh
		  </li>

	  </ul>
	  <ul>
		  <li>
			  hjyitjuninjiokiojkiokyo
		  </li>
		  <li>
			  tiojbiji0hjijiojoikio
			  hjgiojiojgijinihgiojiojiogjijiojijg
			  hgok9uhik9iuki0kikh
		  </li>
	  </ul>
	  <ul>
		  <li>
			  ojhg9hiojiojiojijijij
		  </li>
		  <li>
			  tiojbiji0hjijiojoikio
			  hjgiojiojgijinihgiojiojiogjijiojijg
			  hgok9uhik9iuki0kikh
		  </li>
	  </ul>

  </body>
</html>

satantx · January 2, 2011

Стиль:

ul {
		width: 500px;
		list-style: none;
		padding: 0px;
		margin: 0px;
		}
	li {
		float:left;
		margin-right:30px;
		color:#516081;
		font-size: 14px;
		}
	li a span {
		color:#959595;
		font-size: 10px;
		}
	li a:link { text-decoration:none; }
	li a:hover { text-decoration:underline; }

Код:

<ul>
<li><a href='#'>to the beginning<br/><span>главная</span></a></li> 
<li><a href='#'>follow me<br/><span>twitter</span></a></li> 
<li><a href='#'>rss syndication<br/><span>post</span></a></li> 
<li><a href='#'>send to<br/><span>e-mail</span></a></li>
</ul>

Edited January 2, 2011 by satantx

Temiks · January 2, 2011

satantx ul забыл вначале

<ul>
<li>
....
</li>
</ul>

satantx · January 2, 2011

Temiks, спасибо, забыл)

unquaker · January 2, 2011

Огромное спасибо за помощь!

Sign In

Навигация с дополнительным текстом

Question

unquaker

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Temiks

Link to comment

Share on other sites

satantx

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

satantx

Link to comment

Share on other sites

unquaker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information