X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Неправильная структура таблицы
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 10:59; Ответить: Zuldek
Сообщение #1


Вот не могу понять как правильно сделать. Есть таблица http://www.darwell.ru/index.html
Нужно чтобы по мере наполнения контентом растягивались только две белые ячейки (вторая сверху в первом стобце, и сайдбар во втором столбце).

А у меня получается что растягиваются все ячейки (правильно отображает только Firefox). Как надо переписать код таблицы чтобы растягивались по высоте только белые ячейки?
<!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" dir="ltr" lang="ru">
<head>
<title>123</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>
<table width="500px" border="1">
<tr>
<td height="40px" colspan="2">&nbsp;</td>

</tr>
<tr>
<td width="300px" height="30px" bgcolor="#990000">ячейка фиксированной высоты, не тянется</td>
<td valign="top" rowspan="4"><p>текст, ячейка должна растягиваться по высоте</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p>
<p>&nbsp;</p>
<p>текст, должен тянутся.</p>
<p>текст, должен тянутся.</p></td>
</tr>
<tr>
<td>ячейка должна рстягиваться по высоте</td>
</tr>
<tr>
<td height="30px" bgcolor="#999999">ячейка не должна тянутся по высоте</td>
</tr>
<tr>
<td height="40px" bgcolor="#336633">ячейка не должны тянутся п овысоте</td>
</tr>
</table>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 15:35; Ответить: Zuldek
Сообщение #2


Неужели это так сложно что никто не может ответить?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
NiKON_hb
NiKON_hb
сообщение 4.1.2011, 16:41; Ответить: NiKON_hb
Сообщение #3


Нарисуйте нужную структуру таблице в пэинте (для более продвинутых фотошоп)), а то из ваших "текст, должен тянутся" и "ячейка не должна тянутся по высоте" я ничего не понял.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 17:10; Ответить: Zuldek
Сообщение #4


(NiKON_hb @ 4.1.2011, 18:41) *
Нарисуйте нужную структуру таблице в пэинте (для более продвинутых фотошоп)), а то из ваших "текст, должен тянутся" и "ячейка не должна тянутся по высоте" я ничего не понял.

[attachment=37354:123123.gif]
Вот так хотелось сделать но не получается.
последняя попытка вот - http://www.darwell.ru/index3.html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
NiKON_hb
NiKON_hb
сообщение 4.1.2011, 17:37; Ответить: NiKON_hb
Сообщение #5


<!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>Документ Без Имени</title>
</head>

<body>
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style=" height: auto;" valign="top"><p>Текст </p>
<p>Текст </p>
<p>Текст </p>
<p>Текст </p>
</td>
</tr>
<tr>
<td width="80%" style="height: 100%;" valign="top">
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td style="height: auto;" valign="top"><p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p></td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
</table></td>
<td valign="top" style="height: auto;"><p>Тут много текста </p>
<p>Тут много текста</p>
<p>&nbsp;</p></td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 18:09; Ответить: Zuldek
Сообщение #6


В этом варианте если текст в сайдбаре превышает высоту текста в левой колонке получается вот что:
<!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" /><!-- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> -->
<title>Документ Без Имени</title>
</head>

<body>
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style=" height: auto;" valign="top"><p>Текст </p>
<p>Текст </p>
<p>Текст </p>
<p>Текст </p>
</td>
</tr>
<tr>
<td width="80%" style="height: 100%;" valign="top">
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td style="height: auto;" valign="top"><p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p></td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
</table></td>
<td valign="top" height="20%"><p>Тут много текста </p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>&nbsp;</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>&nbsp;</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>&nbsp;</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>Тут много текста</p>
<p>&nbsp;</p> </td>
</tr>
</table>
</body>
</html>

а нужно чтобы левая и правая колонки были одинаковой высоты. Что исправить?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
NiKON_hb
NiKON_hb
сообщение 4.1.2011, 18:16; Ответить: NiKON_hb
Сообщение #7


<!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>Документ Без Имени</title>
</head>

<body>
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style=" height: auto;" valign="top"><p>Текст </p>
<p>Текст </p>
<p>Текст </p>
<p>Текст </p>
</td>
</tr>
<tr>
<td width="80%" style="height: 100%;" valign="top">
<table width="100%" style="height: 100%;" border="1px;" cellspacing="0" cellpadding="0">
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td style="height: auto;" valign="top"><p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p></td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
<tr>
<td>Тут текст </td>
</tr>
</table></td>
<td valign="top" style="height: auto;"><p>Тут много текста </p>
<p>Тут много текста</p>
<p>&nbsp;</p></td>
</tr>
</table>
</body>
</html>


А так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
NiKON_hb
NiKON_hb
сообщение 4.1.2011, 18:24; Ответить: NiKON_hb
Сообщение #8


В этом случае добавте пустых абзацев после введенного текста пока не станет нормально.
<p>&nbsp;</p>
добавляйте пока колонки не выровняется по высоте между собой
В вашем случае будет выглядеть вот так
<tr>
<td style="height: auto;" valign="top"><p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>А тут валом всего </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
// и продолжать добавлять <p>&nbsp;</p> пока все не станет ровно
</td>
</tr>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 18:32; Ответить: Zuldek
Сообщение #9


Абзацы то это понятно(... дело в том что страница то будет динамически формироваться и сколько там контента будет я не могу знать. Потому и заморачивался
Мне всё это нужно для исправления вёрстки вот такого макета - http://www.darwell.ru/page.php Сейчас проблемы на хостинге через минут 5 будет работать ссылка.
Вот всё вроде бы просто, необходимо чтобы если по высоте больше сайдбар, вытягивалась ячейка первой колонки с контентом, а если по контенту "выше" эта самая ячейка с контентом, то вытягивался бы сайдбар.
В настоящий момент если там сейчас добить контента в сайдбар ещё столько же например, то браузеры все кроме FF начнут растягивать все ячейки первой колонки. Визуально это проявляется в увеличении отступов от между прямоугольниками первой колонки что выглядит некрасиво (
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zuldek
Zuldek
Topic Starter сообщение 4.1.2011, 18:33; Ответить: Zuldek
Сообщение #10


Скажите, а если добавить внизу ещё одну ячейку?
пусть она например будет высотой в 1 пиксель, но будет объединять обе колонки, это както спасёт положение?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужна ли плоская структура категорий в ИМ?
 1 noviktamw 1187 26.3.2024, 21:50
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Отсортировать данные таблицы
по дням/часам и тп
 3 tube 2352 1.7.2017, 0:38
автор: Shandanakar
Открытая тема (нет новых ответов) Нужно настроить мои Таблицы Google
 1 rownong27 2471 25.5.2016, 0:13
автор: -rownong-
Открытая тема (нет новых ответов) Экспорт таблицы с сайта
 2 wolf7808 3077 17.10.2015, 9:42
автор: -wolf7808-
Открытая тема (нет новых ответов) размер таблицы
 7 modz 6427 24.10.2014, 14:57
автор: -modz-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 15:14

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet