Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблема форматирования таблиц при Transitional


Автор: pay 27.6.2005, 12:52
есть задача - растянуть 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
Пользуемся поиском по форуму ;)

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

Автор: pay 28.6.2005, 05:38
Спасибо! Ссылка очень полезной оказалась!

Автор: Greendrake 11.2.2006, 21:52
Помогите и мне разобраться, плиз.
Имеем валидный 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
К <tr> высота не применяется
Пользуйся поиском, сдесь очень много ссылок по <!DOCTYPE>

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

Автор: Greendrake 13.2.2006, 13:15
Цитата

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

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

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

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

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

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

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

Автор: Greendrake 13.2.2006, 17:31
Цитата(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
Попробую поднять вопрос снова.

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

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

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

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

Автор: Illuminaty 4.5.2006, 14:28
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
Illuminaty
вах! маладца!
даже валидатор не подавилси!


 

Автор: Illuminaty 5.5.2006, 15:51
Цитата(Alone @  4.5.2006,  17:03 Найти цитируемый пост)
вах! маладца!

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

Автор: R.M. 5.5.2006, 16:58
Цитата(Illuminaty @  5.5.2006,  16:51 Найти цитируемый пост)
как было бы хорошо, если ...

все юзеры планеты выкинули ИЕ smile это ты хотел сказать? smile  

Автор: Illuminaty 5.5.2006, 18:42
приблизительно... smile 
Удачи! 

Автор: Alone 11.5.2006, 13:23
Greendrake, 
Цитата

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


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

Автор: R.M. 11.5.2006, 13:32
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
м... похоже назревает диагноз, что осел в quirk mode корректнее транслирует код нежели в standard mode???
 

Автор: Alone 11.5.2006, 16:38
Вах!!!
я тут наткнулся на следующее:
http://www.artlebedev.ru/tools/technogrette/html/doctype/
http://www.artlebedev.ru/tools/technogrette/html/doctype2/

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)