Подскажите элегантное решение без таблиц

[abused]

Доброго всем! Есть вопрос для опытных....

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

┌───┬───────┬───┐
│   ┤       ├   │
│   ┤       ├   │
└───┴───────┴───┘

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

Если применить следующее (одно фоновое изображение с "обомя тенями"):

background-image: url(page-bg.png);

background-position: center;

То при ресайзе окна броузера (а точнее, если его ширина становится нечетной), появляется "лишний" вертикальный однопиксельный столбик, что никуда не годится. Кроме того, если сильно уменьшить ширину окна, то вообще все разваливается (из-за фиксированной ширины элементов внутри центрального блока происходит жуткая нестыковка с фоном-тенью)! У центрального блока стиль описан приблизительно так:

width: 940px;

margin: 0 auto 0 auto;

Напрашивается вывод: разбить все на 3 колонки и фоновое изображение разделить на две тени-текстуры (вместо одной большой):

• Тень слева - поместить как фон, пристыковать ее к центральному блоку при помощи background-position: right
  
• Центральный блок - просто белый фон
  
• Тень справа - background-position: left
  

При помощи таблиц это делается проще пареной репы:

HTML

<table class="page" width="100%">
        <tr>
            <td class="left-bg"></td>
            <td width="940px"></td>
            <td class="right-bg"></td>
        </tr>
</table>

CSS

.left-bg
{  b ackground-image: url(left.png);
    background-position: top right;
    background-repeat: repeat-y;
    height: 100%;}
.right-bg
{   background-image: url(right.png);
    background-position: top left;
    background-repeat: repeat-y;
    height: 100%;}

Но вот как быть если БЕЗ таблиц? Тень должна уходить как-бы за пределы окна при малых его размерах (без горизонтальной полосы прокрутки), или быть видимой по обе стороны от центрального блока -- на широких мониторах. Есть ли какое-то элегантное кроссброузерное решение? Центральный блок должен быть растянутым по вертикали и находиться строго по центру окна.

Заранее большущее спасибо.

[abused]

Прошу прощения, уже думал удалить тему.... но нельзя

Нашел решение: убрал оставшийся после экспериментов background-attachment: fixed (который забыл убрать вовремя), добавил min-width: 940px, и немного подправил фоновое изображение.

Скоро, судя по всему, буду хвастаться сайтом....

Edited March 19, 2009 by abused

[klierik]

очень интересно посмаотреть )

[abused]

очень интересно посмаотреть )

Поторопился хвастаться тем, что нашел решение. Однопиксельный баг продолжает о себе напоминать ((((

Жутко неприятное зрелище. Просистся только одно решение: переверстывать заново и использовать-таки таблицу: для центра и теней.

Вопрос в силе, как обойтись БЕЗ таблицы?

[Justnewone]

Поторопился хвастаться тем, что нашел решение. Однопиксельный баг продолжает о себе напоминать ((((

Жутко неприятное зрелище. Просистся только одно решение: переверстывать заново и использовать-таки таблицу: для центра и теней.

Вопрос в силе, как обойтись БЕЗ таблицы?

я так понял, что ширина середины 940px, всегда? Если так, рисуем длинющую картинку которая будет состоять из (слева направо): левого бекграунда, пустого места шириной 940px, правого бекграунда. потом, отрезаем у нее полоску в 1px, в стилях даем это дело на боди с вертикальным повторением и центральным выравниванием. Будет уходить и никаких прокруток не появица.

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

Если надо резиновую середку то только таблицей, но тоже криво и намучаетесь.

Вся беда из-за того, что очень мало дизайнеров. которые хоть как-то разбирались в верстке. Или хотя бы представляли себе как их распрекрасное творение поведет себя в изменяемом окне.

[abused]

Всегда 940px. Сделал три колонки на базе таблицы, ну а все внутренности -- уже как положено, слоями. В принципе, скажу что это своего рода полезный опыт: избавился от стереотипа "бестабличности" Дело в том, что ведь нет, если хорошо поразмыслить, ничего плохого в самом использовании таблиц. Плохо тогда, когда семантика разваливается, и когда черт ногу сломит в попытках понять что то наподобие: "а где же продолжение вон того абзаца".... и т.д. То же самое и с поисковиками.

А насчет беды с дизайнерами - уже это другой вопрос. Если дизайнер настоящий (а не то, что обычно попадается), то иногда имеет смысл положить и на правила, и на разметку, и на поисковики..... а сделать ТОЧНО-ТАК-КАК-НАРИСОВАНО, потому что это красиво, черт возьми. Так что хорошего дизайнера нет особой надобности учить разметке (ну... с некоторой натяжкой), ему просто нужен хороший кодер в команду. А нету кодера - дайте ему флешера! (то, что нельзя накодить - нафлешить можно). Все потому, что шлака в сети полно. Иногда можно положить и на валидность.

[Ogalig]

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