VPF::Проблема форматирования таблиц при Transitional

pay

Дата 27.6.2005, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 2.12.2004

Репутация: нет
Всего: нет

есть задача - растянуть 1 или несколько ячеек таблыцы так, что бы высота таблицы была равной высоте окна (которое, понятно, при разном разрешении разное).

Вот один из частых случаев - к примеру разместить картинку по центру страницы. Есть примерно такой код:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>bla-bla-bla</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
 <tr>
  <td style="padding-top: 50%">Съешь ещё этих сладких французских булочек</td>
 </tr>
 <tr>
  <td valign="middle" align="center" height="290" width="100%">
   <table style="height: 290" width="100%" cellspacing="0" cellpadding="0">
    <tr>
     <td valign="middle" align="center">
     <img src="logo.gif" style="height: 290" width="290" alt=" ">
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td style="padding-top: 50%">Съешь ещё этих сладких французских булочек</td>
 </tr>
</table>
</body>
</html>

Cтраница растягивается до непонятных размеров так, что появляется скролл. Что она берёт за 100% я не понял, но это явно не поле окна. Как растягивать ячейки таблицы при Transitional?

dm9

Дата 27.6.2005, 22:34 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Пользуемся поиском по форуму ;)

http://www.quirksmode.org/css/100percheight.html

Это сообщение отредактировал(а) dm9 - 27.6.2005, 22:36

pay

Дата 28.6.2005, 05:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 2.12.2004

Репутация: нет
Всего: нет

Спасибо! Ссылка очень полезной оказалась!

Greendrake

Дата 11.2.2006, 21:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: 3
Всего: 6

Помогите и мне разобраться, плиз.
Имеем валидный HTML 4.01 Transitional:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Fucking Height</title>
    <style type="text/css">
      html,body,.h100{height:100%;}
      .w100{width:100%;}
      .h30p{height:30px;}
      .b{border:1px solid blue;}
      td{text-align:center;}
    </style>
  </head>
  <body style="margin:0px;padding:0px">
    <table cellpadding="0" cellspacing="0" class="h100 w100">
      <tbody>
        <tr><td class="b h30p">blablabla</td></tr>
        <tr><td class="b">blablabla</td></tr>
        <tr><td class="b h30p">blablabla</td></tr>
      </tbody>
    </table>
  </body>
</html>

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

Приведённый пример работает везде кроме IE smile

. Без DOCTYPE работает везде, но убирать его я не хочу. Высоту пробовал ставить и на TR - пофигу.

Кстати, в спецификации CSS написано:

Цитата

Высота содержимого: свойство height
Применимо: ко всем элементам, кроме текстовых, столбцов таблиц и групп столбцов

Это что означает? Что по стандартам height ваще нельзя ставить ни на TR, ни на TD??? smile

R.M.

Дата 13.2.2006, 08:34 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

К <tr> высота не применяется
Пользуйся поиском, сдесь очень много ссылок по <!DOCTYPE>

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

dm9

Дата 13.2.2006, 10:49 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Greendrake, прочитай статью:
http://www.quirksmode.org/css/100percheight.html

Greendrake

Дата 13.2.2006, 13:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: 3
Всего: 6

Цитата

К <tr> высота не применяется

А к TD по стандартам применяется хошь сказать?

Цитата

Пользуйся поиском, сдесь очень много ссылок по <!DOCTYPE>

А по доктайпу у меня вопросов и нет.

Цитата

прочитай статью:
http://www.quirksmode.org/css/100percheight.html

Её я читал, а ты мой пост?
У меня нет проблем с растягиванием таблицы на 100% по вертикали. Проблемы с высотой ячеек при таком растягивании.

Это сообщение отредактировал(а) Greendrake - 13.2.2006, 13:16

smartov

Дата 13.2.2006, 13:57 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 4
Всего: 259

Greendrake, Возможно при таком DOCTYPE тебе следует форматировать layout div-ами а не table-ами.

Greendrake

Дата 13.2.2006, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: 3
Всего: 6

Цитата(smartov @ 13.2.2006, 13:57)

Greendrake, Возможно при таком DOCTYPE тебе следует форматировать layout div-ами а не table-ами.

Возможно. Решение, я, впрочем, нашёл - в таблице, растянутой по вертикали на 100%, делаем два TR, в каждом из них по одному TD; в верхнем содержимое оттесняем к верху, в нижнем - к низу (через vertical-align). В каждый TD по диву - шапка и подол соответственно. Всё работает при указанном доктайпе.

Но мне тем не менее интересно поведение IE, описанное выше. При задании высоты верхнего и нижнего TD он как бы нарошно, издеваясь, делает её не такой какой задано, а шире, чем средней! Я бы ещё понял если бы он просто игнорировал высоту, а тут блин... smile

Greendrake

Дата 29.4.2006, 22:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: 3
Всего: 6

Попробую поднять вопрос снова.

Задача: сделать разметку страницы, как на http://www.ueberschall.com/ без фреймов при доктайпе HTML 4.01 Transitional, чтобы валидатор был доволен и чтоб работало в последних браузерах.

Что конкретно нужно: 3 горизонтальных блока, верхний и нижний - фиксированной высоты, центральный - с полосой прокрутки (див видимо должен быть). Вся конструкция всегда растянута до 100% от окна - полоса прокрутки у окна быть не должна (если конечно его не ужать до размера суммы верхнего и нижнего блоков по вертикали).

В принципе готов даже отблагодарить материально за решение (либо прошу знатоков дать квалифицированный ответ, что такого решения пока нет - фреймы форева smile

Alone

Дата 4.5.2006, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 663
Регистрация: 11.5.2003
Где: Dnepropetrovsk, U A

Репутация: 1
Всего: 6

Ну, начнем с того что там не валидный доктайп, а следовательно браузер переходит в quirk mode

--------------------

web developer/telecommunication specialist.
mailto: [email protected]
ICQ#28442924

Illuminaty

Дата 4.5.2006, 14:28 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Greendrake, решение для не IE:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <STYLE type="text/css">
      BODY, html { height: 100%; }
      body {
        margin: 0;
        padding: 0;
        }
      #header {
        position: fixed;
        width: 100%;
        height: 100px;
        top: 0px;
        right: 0px;
        bottom: auto;
        left: 0px;
        background-color:#CC9966;
      }
      #main {
        position: fixed;
        width: 100%;
        height: auto;
        top: 100px;
        right: 0px;
        bottom: 100px;
        left: 0px;
        background-color:#CCCC00;
        overflow: auto;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color:#CC0000;
      }
    </STYLE>
  </HEAD>
<BODY>
    <DIV id="header"> Header  </DIV>
  <DIV id="main"> Body<br>
<br>
<br>
<br>
sometext<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
sometext<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
sometext<br>
<br>
<br>
<br>
<br> 
sometext
<br>
<br>
<br> 
sometext
<br>
<br>
<br>
 </DIV>
    <DIV id="footer"> footer </DIV>
</BODY>
</html>

Alone

Дата 4.5.2006, 16:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 663
Регистрация: 11.5.2003
Где: Dnepropetrovsk, U A

Репутация: 1
Всего: 6

Illuminaty
вах! маладца!
даже валидатор не подавилси!

--------------------

web developer/telecommunication specialist.
mailto: [email protected]
ICQ#28442924

Illuminaty

Дата 5.5.2006, 15:51 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Цитата(Alone @ 4.5.2006, 17:03

)

вах! маладца!

А то

Но повторю, что это решение только не для IE. То есть - информация к размышлению: как было бы хорошо, если ...
Удачи!

R.M.

Дата 5.5.2006, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Цитата(Illuminaty @ 5.5.2006, 16:51

)

как было бы хорошо, если ...

все юзеры планеты выкинули ИЕ smile

это ты хотел сказать? smile

--------------------

Illuminaty

Дата 5.5.2006, 18:42 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

приблизительно... smile

Удачи!

Alone

Дата 11.5.2006, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 663
Регистрация: 11.5.2003
Где: Dnepropetrovsk, U A

Репутация: 1
Всего: 6

Greendrake,

Цитата

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

Я озабочен таким же вопросом. smile

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

--------------------

web developer/telecommunication specialist.
mailto: [email protected]
ICQ#28442924

R.M.

Дата 11.5.2006, 13:32 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Alone,

Цитата(Куксикус @ 13.2.2006, 09:34

)

Пользуйся поиском, сдесь очень много ссылок по <!DOCTYPE>

Цитата(Greendrake @ 13.2.2006, 14:15

)

А по доктайпу у меня вопросов и нет.

Цитата(Alone @ 11.5.2006, 14:23

)

Я озабочен таким же вопросом.

Если у тебя тоже нет вопросов по доктайпу то наверно вопрос не будет исчерпан т.к. дело ИМХО в нём.

--------------------

Alone

Дата 11.5.2006, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 663
Регистрация: 11.5.2003
Где: Dnepropetrovsk, U A

Репутация: 1
Всего: 6

м... похоже назревает диагноз, что осел в quirk mode корректнее транслирует код нежели в standard mode???

--------------------

web developer/telecommunication specialist.
mailto: [email protected]
ICQ#28442924

Alone

Дата 11.5.2006, 16:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 663
Регистрация: 11.5.2003
Где: Dnepropetrovsk, U A

Репутация: 1
Всего: 6

Вах!!!
я тут наткнулся на следующее:
Тип документа: объявлять или не объявлять?
Тип документа: режимы рендеринга

моя думать...

--------------------

web developer/telecommunication specialist.
mailto: [email protected]
ICQ#28442924

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »