Форум

PepeL · #1 (**permalink**) 21.01.2010, 12:02

Имеется вот такая таблица:

<table cellspacing="10" style="width:100%; height:100%;">
 <tr>
  <td style="width:auto; height:auto; background:#009000;"> ячейка №1</td>
  <td rowspan="2" style="width:300px; height:100%; background:#cc0000;">
   <div style="width:100px; height:100%; background:#ccff00;"></div>
  </td>
 </tr>
 <tr>
  <td style="width:auto; height:100px; background:#ccee00;">ячейка №3</td>
 </tr>
</table>

При изменении размеров окна браузера в "Opera" ячейка №3 "срывается" и увеличивается в размере. Если же убрать из второй ячейки блок или задать ему высоту в пикселях - всё работает нормально.
В чем проблема непонимаю, может кто сталкивался ?
И есть ли вариант такой же верстки на блоках ?

vk65535 · #2 (**permalink**) 02.02.2010, 14:39

На блоках можно, например, так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html { height: 100%; }
body { position: relative; margin: 0; min-height: 100%; min-width: 770px; }
div#layout-center
{ position: relative; padding: 10px 320px 120px 10px; z-index: 1; }
div#layout-right
{ position: absolute; top: 10px; right: 10px; bottom: 10px; width: 300px; background: #cf0; }
div#layout-bottom
{ position: absolute; bottom: 10px; left: 10px; right: 320px; height: 100px; background: #c00; }
div#layout-background
{ position: absolute; left: 10px; top: 10px; right: 320px; bottom: 120px; background: #008000; }
</style>
<!--[if lt IE 7]><style type="text/css">
body { height: 100%; }
div#layout-background
{ width: expression(parentNode.clientWidth - 330); height: expression(parentNode.clientHeight - 130); }
div#layout-right { height: expression(parentNode.clientHeight - 20); }
div#layout-bottom { width: expression(parentNode.clientWidth - 330); }
</style><![endif]-->
</head>
<body>
<div id="layout-center">content</div>
<div id="layout-right">right</div>
<div id="layout-bottom">bottom</div>
<div id="layout-background"></div>
</body>
</html>

subzey · #3 (**permalink**) 02.02.2010, 15:14

При верстке таблицами не используйте colspan и rowspan, хотя бы для первой строки. Иначе проблем, типа вот такой вот, не оберетесь.

PepeL · #4 (**permalink**) 02.02.2010, 20:52

Всем спасибо, решил эту проблемку немножко по другому.. не знаю хорошо это или нет? Часть сделал через свойства, в основном это ширина блоков, а высоту некоторых пересчитавал через JS при onload и onresize. )

subzey · #5 (**permalink**) 03.02.2010, 10:50

PepeL,
вложенные таблицы религия не позволяет использовать?

PepeL · #6 (**permalink**) 03.02.2010, 12:39

subzey,
Да нет, просто многие кричат что таблицы это жуть как страшно... но убедительных доказательств в их ужастности так нигде и не нашел. Вот и не знаю кого слушать, а кого нет )

PeaceCoder · #7 (**permalink**) 03.02.2010, 13:15

Сообщение от PepeL

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

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

PepeL · #8 (**permalink**) 03.02.2010, 13:50

PeaceCoder,
А помимо субьективных наблюдений, кто-нибудь проводил уже обьективные тесты ?
На счет количества тегов согласен )

subzey · #9 (**permalink**) 03.02.2010, 21:36

PepeL,
никого не слушайте. Гибридная верстка завсегда лучше.

Cuprum · #10 (**permalink**) 22.02.2010, 18:02

Цитата:

Гибридная верстка завсегда лучше.

Больше нравится прицип "от печки" - там где можно сделать блоками - делаем блоками, и только в том случае если без таблиц никак - <table> (что бывает нечасто)

Форум

Справочник

Discord чат

Курсы javascript