Резиновая ячейка в таблице

[bFree]

Здравствуйте.

Пытаюсь сверстать меню. Столкнулся с проблемой: ни в какую не хочет растягиваться под нужную высоту ячейка под номером 2 (см. скрин).

Высота верхней и нижней ячеек жестко заданы. и содержат градиентный фон. Вторая ячейка просто залита цветом (в данном случае красным).

Как можно заставить ее растянуться до необходимой высоты? (на скрине она растянута вручную а так получает высоту 0)

HTML & CSS:

<div id="navigation">
	<table cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="3">
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
		</td>
		<td id="line_up"></td>
	</tr>
	<tr>
		<td id="line_center"></td>
	</tr>
	<tr>
		<td id="line_down"></td>
	</tr>
	</table>
</div>

div #navigation table {
	border: none;
	width: 100%;
}
	div #line_up {
		width: 2px;
		height: 141px;
		background-image: url(http://store/img/line_light_up.png);
		background-repeat: repeat-x;
	}
	div #line_center {
		width: 2px;
		background-color: #F00;
	}
	div #line_down {
		width: 2px;
		height: 141px;
		background-image: url(http://store/img/line_light_down.png);
		background-repeat: repeat-x;
	}

[psywalker]

у меня так растягивается

div #line_center {

width: 2px;

background-color: #F00;

height: 400px;

}

[bFree]

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

[psywalker]

А так не прокатит:

<table>
	<tr>
		<td colspan="2">Top</td>
	</tr>
	<tr>
		<td>  
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br />
			NAV HERE<br /></td>
		<td style="background:red;">Тянется</td>
	</tr>
	<tr>
		<td colspan="2">Bottom</td>
	</tr>
</table>

[bFree]

Все бы хорошо, но мне надо добиться "растягивания" градиентной линии (см скрин)

[psywalker]

Все бы хорошо, но мне надо добиться "растягивания" градиентной линии (см скрин)

1) Фон не растягивается, а только повторяется

2) Оберни таблицу в div#navigation и уже на него повесь фон, в чём проблема?

[bFree]

Вы не поняли

Линия состоит из 3 ячеек, верхняя и нижняя содержат фоновую картику и их размер фиксирован.

между ними обычная ячейка (номер 2) с background-color. Мне надо добиться того, чтобы она растягивалась, т.е. чтобы удлиннялась средняя часть линии.

[Игорь Ермаков]

Я не понимаю, что ты паришься, переверстай всё на списках и блоках, я бы лично сдох таблицей всё это кодить, в упор не понимаю поведения этих ячеек, хоть убейте.

Тебе потребуется один список и рядом блок, которым ты наверстаешь эту линию так как тебе надо.

[psywalker]

Вы не поняли

Линия состоит из 3 ячеек, верхняя и нижняя содержат фоновую картику и их размер фиксирован.

между ними обычная ячейка (номер 2) с background-color. Мне надо добиться того, чтобы она растягивалась, т.е. чтобы удлиннялась средняя часть линии.

Опятьже не вопрос:

1) На верхнюю и нижнюю ячейки вешаешь фиксированный правый фон(по ширине с ячейкой (номер 2) с background-color ), самих их тоже делаешь фиксированными, по высоте.

2)И всё, в итоге всё нормально, ячейка (номер 2) с background-color отлично растягивается, а нижняя и верхняя ячейки с правым фоном отлично держатся

[bFree]

Игорь Ермаков, по-вашему, блок автоматом примет высоту списка? Потому и стал верстать таблицей, что высота одна и та же должна быть

psywalker, ну и будут у меня "рога" сверху и снизу висеть

Edited November 4, 2009 by bFree

[psywalker]

Игорь Ермаков, по-вашему, блок автоматом примет высоту списка? Потому и стал верстать таблицей, что высота одна и та же должна быть

psywalker, ну и будут у меня "рога" сверху и снизу висеть

1) Ну и что, так ведь ты же сам хочешь этого, чтобы средняя линия просто тупо тянулась с обычным фоном, а верхняя и нижняя ячейки были фикс по высоте?

2) Короче дай мне чёткий скрин того, что ты хочешь получить с подробнейшим объяснением, возможно твою задачу можно решить по-другому

[Игорь Ермаков]

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

<style type="text/css">
*{margin:0;padding:0}
.contaner{background:#666;width:500px;padding:20px;
height:300px}
.contaner ul{float:left}
.contaner div.border{background:#ccc;
height:100%;width:5px;
float:right;}
.contaner div.top{background:#000;height:10px}
.contaner div.bottom{background:#000;height:10px;
position:relative;top:100%;margin-top:-10px; //margin-top:-20px}
</style>

</head>
<body>

<div class="contaner">


<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>

<div class="border">
<div class="top"></div>
<div class="bottom"></div>
</div>

</div>

</body>
</html>

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