Как реализовать это в блочной верстке

[stars]

Проблема такая есть таблица:

<table class="tabl" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left"> </td>
<td class="center">*тут контэнт*</td>
<td class="right"> </td>					
</tr>
</table>

Вот к ней ксс

.tabl{width:100%; height:100%;}
.left{background:url('left.jpg') right top no-repeat;}
.right{background:url('right.jpg') left top no-repeat;}
.center{width:974px; vertical-align:top;}

тоесть по сути сайт ширеной 974px(рабочего поля), а побокам картинки которые прописаны как бэкграунд(они большого размера чтобы если ты увеличиваешь разришение их было видно если разришение меньше то не видешь часть(но приэтом с низу нету полосы прокрутки))

Вот хочется сделать тоже самое но без таблиц...

Пример таблицы сделал http://stars124.narod.ru/6.html волли и ева евляются фоном по бокам и уезжают за экран(ну если только у вас не кинозал дома) а картинка мадагоскара евляется рабочем полем и если экран меньше 974px то поевляется с низу полоска прокрутки...

Edited September 5, 2008 by stars

[Vlad]

Понадобится два дива. В первом будет левый фон и контент, во втором (он внутри первого) - правый фон. Ширину для всего блока ставишь 974 пиксела и отступами слева-справа сдвигаешь контент от фоновых рисунков на нужное расстояние.

[stars]

Понадобится два дива. В первом будет левый фон и контент, во втором (он внутри первого) - правый фон. Ширину для всего блока ставишь 974 пиксела и отступами слева-справа сдвигаешь контент от фоновых рисунков на нужное расстояние.

Второй внутри первого? Чет я окончательно запутался... А пример можно?

[Victor Ananiev]

ну ты понимаешь как это див в диве(слой в слое), ну дык вот есть два дива А и В, так вот слой А - это слой с левым бэком и контентом, а В находится в нутри А, и имеет левый фон.

[stars]

ну ты понимаешь как это див в диве(слой в слое), ну дык вот есть два дива А и В, так вот слой А - это слой с левым бэком и контентом, а В находится в нутри А, и имеет левый фон.

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

.left{background:url('left.jpg') right top no-repeat;}
.right{background:url('right.jpg') left top no-repeat;}

вот картинка 1) это контент 2 и 3 это бока сделанные бэками. (красные уголки это показано выравнивание бэков(точки к которым они прекреплены))

Я бы и дивами так сделал просто взял 3 дива задал размеры, но проблема то в том что у контента есть четкие размеры 974*1300 а у боковин выставлены только высоты 1300(по ширине там 500 каждая) и если это делается таблицей то даже с разрешением экрана 1024 у тебя виден контент по середине а боковины видны только столько сколько влезет(причем тут принципиально то что бэки прикреплены так как у меня на рисунке так как сайт выполнен одной картиной). Если я делаю дивами то надо задавать ширину и автоматически ширина сайта будет равна не 974+(сколько влезет на экран бэка) а уже 974+2*500 и в результате в низу браузера появляется бегунок для прокрутки...

Под контентом я подразумеваю основную часть сайта там всякие блоки менюшки и т.д. просто они все в одном большом блоке.

Edited September 9, 2008 by stars

[Vlad]

Есть два основных способа решения.

1. Создается один контейнер, для него указывается суммарная ширина блоков. Внутри контейнера добавляются три слоя, позиционируются через float или другим способом. Для крайних слоев необходимо задать минимальную ширину в процентах и установить фон.

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

В любом случае ширину колонки 2 и 3 лучше задавать, хотя бы минимальную через min-width. Тогда и фон будет виден и слои начнут уменьшаться при изменении размера окна. Но в точности получить аналог макета на таблицах не получится.