Табуляция с точками

[human]

как сделать такой вот макетик

						   резиновый div
				  ——————————————
				 | Машин..............................10|														
				 | Велосипедов.....................5|													  
				 | Мотоциклов.......................4|														   
				 |									  |				  
				  —————————————--

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

Есть ли какие нибудь стандартные средства для реализовки такого, или придется выкручиваться танцами с бубном ??

Edited April 21, 2009 by human

[s0rr0w]

  human said:

как сделать такой вот макетик

						   резиновый div
				  ——————————————
				 | Машин..............................10|														
				 | Велосипедов.....................5|													  
				 | Мотоциклов.......................4|														   
				 |									  |				  
				  —————————————--

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

Есть ли какие нибудь стандартные средства для реализовки такого, или придется выкручиваться танцами с бубном ??

Что вас смущает? Что вы не можете реализовать из приведенного?

[human]

<div style=''width:100%>
	  <div style='float:left'>Машины</div>
а тут нужно как то сделать чтобы оставшееся растояние заполнялось точечками =)) 
	 <div style='float:right'>10</div>
</div>

[SelenIT]

Практически идентичный вопрос и ответы на него: http://forum.htmlbook.ru/index.php?showtop...amp;#entry87447

[human]

Спасибо =)

[Вадим]

Пример 1.

HTML

<ul id="list">
<li><span>11</span> <a href="#">CSS</a><br /></li>
<li><span>20</span> <a href="#">HTML</a><br /></li>
<li><span>35</span> <a href="#">jQuery</a><br /></li>
<li><span>62</span> <a href="#">JavaScript</a><br /></li>
</ul>

CSS

ul#list {list-style:none;width:320px;}
#list li {background:url(botline.gif) repeat-x 0 0.85em;}
#list li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#list li span {float:right;background:#FFF; padding 0 0 0 4px;}
#list li br {clear:both;}

Где botline.gif собственно нижнее подчеркивание (см. пример).

Источник: http://www.art-shok.ru/css/menyu-v-vide-kn...vleniya-na-css/

Пример 2.

HTML

<div id="wrap">
 <div class="inner">
  <dl>
   <dt>Dish 1</dt>
   <dd><em>Lorem ipsum dolor sit amet </em></dd>
  </dl>
  <dl>
   <dt>Dish 2</dt>
   <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
  </dl>
  <dl>
   <dt>Dish 3</dt>
   <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
  </dl>
  <dl>
   <dt>Dish 4</dt>
			<dd><em>Donec sed felis sit amet risus</em></dd>
		</dl>
		<dl>
			<dt>Dish 5</dt>
			<dd><em>Maecenas
ante. Suspendisse pharetra, metus in tempus egestas, purus ante
pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula,
porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna.
Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
		</dl>
		<dl>
			<dt>Dish 6</dt>
			<dd><em>Etiam ante ligula,</em></dd>
		</dl>
		<dl>
			<dt>Dish 7</dt>
			<dd><em>Fusce condimentum</em></dd>
		</dl>
		<dl>
			<dt>Dish 8</dt>
			<dd><em>Morbi nibh velit, sodales eu</em></dd>
		</dl>
		<dl>
			<dt>Dish 9</dt>
			<dd><em>Etiam ante ligula,</em></dd>
		</dl>
		<dl>
			<dt>Dish 10</dt>
			<dd><em>Fusce condimentum</em></dd>
		</dl>
		<dl>
			<dt>Dish 11</dt>
			<dd><em>Morbi nibh velit, sodales eu</em></dd>
		</dl>
		<dl>
			<dt>Dish 12</dt>
			<dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
		</dl>
	</div>
</div>

CSS

* {margin:0;padding:0}
#wrap{
	width:500px;
	border:1px solid #eff2df;
	margin:0 20px;
	background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
	padding:20px 40px;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
	position:relative;
	width:100%;
	border-bottom:1px solid #eff2df;
}
#wrap dd{
	line-height:1.2em;
	position:relative;
	padding:0 5em 0 0;
	text-align:left;
	border-bottom:1px dotted #000;
	clear:both;
	margin:0 0 .4em 0;
	min-height:0;
}
* html #wrap dd{
	border:none;
	background: url(dotted-leader.gif) repeat-x left bottom;
	height:1%;
}
#wrap dt{
	background:#eff2df;
	padding:1px 0 1px 5px;
	color:#809900;
	position:absolute;
	bottom:0px;
	right:-1px;
	z-index:99;
}
#wrap dd em{
	margin:0;
	position:relative;
	top:.25em;
	padding:0 5px 0 0;
	background:#eff2df;

Если вы посмотрите на стандартное ресторанное меню (или рецепт), там слева расположены названия блюд, за ними идет пунктирная линия до правого края, где расположена цена этого блюда.

Источник: http://www.web-utils.net/css/recipe-menu

Edited April 22, 2009 by Вадим

[SelenIT]

  Quote

правильная структура с точки зрения SEO

Список <dt> без <dd> — правильная структура? Звучит, гм... необычно. Нельзя ли чуть поподробнее?

[Вадим]

  SelenIT said:

Список <dt> без <dd> — правильная структура? Звучит, гм... необычно. Нельзя ли чуть поподробнее?

Наверное не прав, но ошибки здесь нет.

[SelenIT]

Нарушения DTD нет. Но семантика списка покоцана не по-детски, так что strictly conforming такая разметка не является. Если это просто перечисление, а не словарик с пояснениями, обычный UL-LI гораздо уместнее, имхо.

Edited April 21, 2009 by SelenIT

[Вадим]

  SelenIT said:

Нарушения DTD нет. Но семантика списка покоцана не по-детски, так что strictly conforming такая разметка не является. Если это просто перечисление, а не словарик с пояснениями, обычный UL-LI гораздо уместнее, имхо.

согласен. отредактировал