Вертикальное выравнивание в ячейке таблицы.

lighted · February 19, 2008

Хотелось бы сделать несколько надписей (

) выравненных top и один элемент (картинка) выравненный bottom. Все в одной ячейке таблицы. Возможно ли это?

ZooY · February 19, 2008

Может картинку проще фоном ячейки сделать?..

lighted · February 19, 2008

Может картинку проще фоном ячейки сделать?..

Дело в том, что у меня уже эта ячейка залита фоновым изображением (текстурой). До того как залил текстурой, я вставлял этот рисунок как фоновое изображение ячейки с выравниванием по низу. А теперь и не знаю как быть то...

ZooY · February 19, 2008

Пользуй margin-topдля картинки, или таблицу в таблицу, чтобы 2 фона можно было задать.

Если высота ячейки не меняется - вложи в ячейку DIV, растяни по высоте и картинку фоном к DIVу.

lighted · February 20, 2008

Пользуй margin-topдля картинки, или таблицу в таблицу, чтобы 2 фона можно было задать.
Если высота ячейки не меняется - вложи в ячейку DIV, растяни по высоте и картинку фоном к DIVу.

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

Можно сделать еще одну ячейку, поставить для нее выравнивание по низу и поместить туда картинку (картинку так же можно помещать только как фоновую, потому что у обычной сразу слетает адрес в шаблоне). Недостатки такого способа: граница раздела ячеек видна и занимает разное положение в зависимости от броузера; даже если ее сделать невидимой, все равно виден стык текстур...

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

lighted · February 20, 2008

Пользуй margin-topдля картинки...

Слушай, margin-top 100% дает нужный эффект! Правда только для седьмого интернет эксплорера. Fox ставит по-центру картинку... Буду дальше пробовать. Но все равно, спасибо за подсказку.

Дядя Саша · February 20, 2008

Недостатки такого способа: граница раздела ячеек видна и занимает разное положение в зависимости от броузера; даже если ее сделать невидимой, все равно виден стык текстур...

a cellpadding='0' cellspacing='0' вы не пробовали добавить?

lighted · February 20, 2008

Недостатки такого способа: граница раздела ячеек видна и занимает разное положение в зависимости от броузера; даже если ее сделать невидимой, все равно виден стык текстур...
a cellpadding='0' cellspacing='0' вы не пробовали добавить?

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

lighted · February 20, 2008

Я нашел решение, но работает опять же только в IE7

Посмотрите, пожалуйста, мой код. Почему FireFox не хочет правильно позиционировать div?

<!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>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="1" class="test001">
  <tr>
	<td valign="top"><p>1</p>
	  <div class="test002">Content for New Div Tag Goes Here</div> </td>
	<td><p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
	<p>1</p>
   </td>
  </tr>
</table>
</body>
</html>

Стили:

@charset "utf-8";
.test001 {
	position: relative;
}
.test002 {
	position: absolute;
	bottom: 0px;
	background-color: #666666;
	color: #CCCCCC;
	right: 0px;
	left: 0px;
}

Vlad · February 21, 2008

FF правильно позиционирует блок, как ему и указано, по нижнему краю окна.

lighted · February 21, 2008

FF правильно позиционирует блок, как ему и указано, по нижнему краю окна.

Но ведь я указал, что позиционирование для таблицы - относительное. Поэтому я думал, что после этого при абсолютном позиционировании div он будет считать границами позиционирования границы бокса

таблицы. IE так и делает, а FF, такое впечатление, просто не считает что таблица является контейнером для div. Извиняюсь, если не точно указал термины.

Влад, хорошо, такой вопрос: кто является родителем для div в моем примере по версии броузера FF?

lighted · February 22, 2008

Сделал позиционирование относительно body. Плохо, конечно, но примерно то, что нужно.

Vlad · February 24, 2008

Судя по результату, FF относительно body и позиционирует div.

Sign In

Вертикальное выравнивание в ячейке таблицы.

Question

Link to comment

Share on other sites

12 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

Обсуждения

Important Information