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

Правильно разрезать макет. Резиновая верстка

Метки: [без меток]
2010-02-27 10:14:51 [обр] webing[досье]

Добрый день!
Отсоветуйте/присоветуйте, плиз. Ситуация такая, есть четырехколоначтая верстка:

фиксированная_колонка_слева|полурезиновая_колонка|исчезающая_колонка|фиксированная_колонка_справа

Дабы у всех пользователей с разными разрешениями и браузерами отображалось все более-менее нормально пытаюсь придумать правильный макет.
Условия:

  1. Разрешение 1024х768 и ниже: исчезающая колонка скрывается по js, полурезиновая расползается до оставшегося размера вправо.
  2. Разрешение 1280×800: исчезающая колонка появляется (фиксированный размер), полурезиновая расползается до оставшегося размера вправо.
  3. Разрешение 1400×800 и выше: исчезающая колонка появляется (фиксированный размер), полурезиновая расползается до фиксированной ширины.

Надеюсь, понятно обрисовал.
Думал резать так.

Макет:
Табличная верстка: <table width="1400" id="main">
Полурезиновая колонка <td width="100%">
Исчезающая колонка <td id="colonka">
Слой, который в исчезающей колонке с содержимым <div id="moving_layer">Новости типа</div>

Скрипт вычисляет размеры окна/разрешения.
Для исполнения условия 1 делаю:
 document.getElementById('colonka').innerHTML="";
 document.getElementById('moving_layer').class="hide"; // скрыли по display:none
 document.getElementById('main').width="100%"; // изменяю ширину таблицы (не разбирался еще. синтаксис неправильный)

Для исполнения условия 2 делаю:
 document.getElementById('colonka').innerHTML=document.getElementById('moving_layer').innerHTML; // скопировали в колонку содержимое слоя
 document.getElementById('moving_layer').class="show"; // показали по display:block
 document.getElementById('main').width="100%"; // изменяю ширину таблицы (не разбирался еще. синтаксис неправильный)

Для исполнения условия 3 делаю:
 document.getElementById('colonka').innerHTML=document.getElementById('moving_layer').innerHTML; // скопировали в колонку содержимое слоя
 document.getElementById('moving_layer').class="show"; // показали по display:block
 document.getElementById('main').width="1400"; // изменяю ширину таблицы (не разбирался еще. синтаксис неправильный)

Наставьте на путь истинный! Заранее спасибо за указанные недочеты и подводные камни при совместимостях браузеров.
Может есть готовые рецепты/статьи или хорошие примеры? киньте урлом

спустя 9 часов [обр] Marat Tanalin(6/78)[досье]
Что именно подразумевается под *полу*резиновой колонкой?
спустя 8 минут [обр] webing[досье]
Ну т.е. она растягивается не до 100%, а все-таки имеет предел. При условии №3. Может не совсем корректно назвал, сорри
спустя 4 дня [обр] Алексей В. Иванов(197/2861)[досье]
М Перенесено из форума "Интернет::Стандарты"
Powered by POEM™ Engine Copyright © 2002-2005