Xpoint
   [напомнить пароль]

Валидная верстка на таблицах

Метки: [без меток]
2007-12-05 15:08:09 [обр] AndrewM[досье]

Собственно всё очень просто.
Нужно валидно(!) хотя бы по HTML 4.01 Transitional и по CSS 2 отверстать на таблицах сайт следующей структуры:

Шапка, высотой 100px
Меню, шириной 100pxКонтент, шириной и высотой заполняющий оставшееся пространство
Подвал, высотой 100px

Минимальная высота и ширина сайта должна быть 100%.
Не использовать expression ни в каком виде и нигде.
Естественно совместимо со всеми браузерами (FF 1.0+, MSIE 5.5+, Opera 7+).
На ум приходит следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
  <TITLE></TITLE>
  <STYLE TYPE="text/css">
  HTML, BODY {HEIGHT:100%}  
  </STYLE>
</HEAD>
<BODY STYLE="MARGIN: 0; PADDING: 0">

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" STYLE="HEIGHT: 100%">
<TR>
  <TD><DIV STYLE="WIDTH: 100px">Меню</DIV></TD>
  <TD WIDTH="100%" STYLE="HEIGHT: 100%">

    <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" STYLE="HEIGHT: 100%">
    <TR>
      <TD STYLE="HEIGHT: 100px"><DIV STYLE="HEIGHT: 100px">Шапка</DIV></TD>
    </TR>
    <TR>
      <TD STYLE="HEIGHT: 100%">В MSIE эта ячейка имеет высоту 100% от видимой области броузера.</TD>
    </TR>
    <TR>
      <TD STYLE="HEIGHT: 100px"><DIV STYLE="HEIGHT: 100px">Подвал</DIV></TD>
    </TR>
    </TABLE>

  </TD>
</TR>
</TABLE>

</BODY>
</HTML>

Но в MSIE ячейка вложенной таблицы, имеющая высоту 100% распирает весь документ по вертикали, на 100px+100%+100px
Проблема не в том, что я не могу сделать такую верстку как-то по другому, а в том, что я хочу сделать ее 100% валидно! То есть без упоминания expression где либо.
Это возможно?

спустя 25 минут [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]
AFAIK, в MSIE в Strict mode одной таблицей — нельзя. Если высоту контентной ячейки не указывать, то будут игнорироваться высоты шапки и подвала. Варианты — либо "насильственный" Quirks mode (в 6-ке для этого хватало написать комментнарий перед доктайпом, теперь облом...), либо делать тремя таблицами и накладывать шапку и футер на padding-и основной ячейки. Сам юзаю второй вариант.
спустя 9 часов [обр] Евгений Петров(172/1055)[досье]

AndrewM[досье]
Ну вот теперь отвечу.
Если не работать в quirks mode в IE, то такая схема не сработает. Ячейка с высотой 100% будет брать ее от body. Поэтому для подвала с фиксированной высотой давно и успешно используется схема с отрицательным margin-bottom. В той теме, где мы общались недавно, я привел примеры с такой схемой.
Замечу, что такая схема валидна и с вашей точки зрения. Все можно записать даже в одном CSS.

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

спустя 4 дня [обр] AndrewM[досье]

Илья Cтpeльцын aka SelenIT[досье], мне по мотивам Ваших слов пришел в голову такой вот код...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
  <TITLE></TITLE>
  <STYLE TYPE="text/css">
  HTML, BODY {HEIGHT:100%}
  TD {VERTICAL-ALIGN: top}
  </STYLE>
</HEAD>
<BODY STYLE="MARGIN: 0; PADDING: 0">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" STYLE="HEIGHT: 100%">
<TR>
  <TD STYLE="HEIGHT: 100%"><DIV STYLE="WIDTH: 100px; HEIGHT: 100%; BACKGROUND-COLOR: #FFEEEE">Меню</DIV></TD>
  <TD WIDTH="100%" STYLE="HEIGHT: 100%">
    
    <DIV STYLE="HEIGHT: 100px; BACKGROUND-COLOR: #EEEEFF">Шапка</DIV>
    
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" STYLE="HEIGHT: 100%; MARGIN-TOP: -100px; MARGIN-BOTTOM: -100px">
    <TR>
      <TD STYLE="PADDING-TOP: 100px; PADDING-BOTTOM: 100px">

        <DIV STYLE="BACKGROUND-COLOR: #FFFFEE">
        Контент
        </DIV>

      </TD>
    </TR>
    </TABLE>
    
    <DIV STYLE="HEIGHT: 100px; BACKGROUND-COLOR: #EEFFEE">Подвал</DIV>

  </TD>
</TR>
</TABLE>

</BODY>
</HTML>

А есть еще какие-нибудь варианты?

Powered by POEM™ Engine Copyright © 2002-2005