Верстаем кроссбраузерный «резиновый» макет страницы

Как вы уже могли заметить, страницы моего блога некоторое время назад стали "резиновыми". Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью поиска наилучшего решения с вашей помощью, уважаемые читатели ...

Комментарии (25)

  1. Конечно дело вкуса, но align=»justify» всё портит.
    p.s. лебедев и ко за такое сильно матерят и отрывают руки :)

  2. Капец устал глазами центровать твой блог.Он раз 5 перескакивал то к правой стороне то к левой:)А почему ты не хочешь все это чудо запихнуть в таблицы с процентным разбиением.Резиновые таблицы и центруются сами и легче в управлении.Может я не прав,делаешь одну таблицу главную,делишь на 2 столбца,даешь 60% контент и 40% сайдбар.Границы таблицы делаешь невидимыми.Можно 70 и 30.И все,при открытии и сворачивании все отлично.

  3. Мажор, таблицами при разметке не пользуюсь принципиально.

  4. Блин, такую телегу набил, а коммент не прошел. Абыдна, да.

    Если вкратце — есть два способа. Извращенный и мега-извращенный:-)

    1. Dead centre тебе в помощь для начала: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
    Далее тебе надо будет написать скрипт, определяющий клиентскую ширину окна. Задать фиксированный марджин слева, приплюсовать к нему ширину сайдбара справа. Сумму вычесть из рассчитанной ширины окна. И уже ее использовать для позиционирования контентного блока (см. Dead Centre). Под аяксом и асп подобная задача решаема. Сам именно так и решал:-)

    2. Контентный div должен иметь своим родителем окно бровзера. Для этого его надо объявить сразу за body с position:absolute; и задать справа и слева фиксированные отступы (div будет растягиваться и сжиматься динамически, сам видел!).

  5. Мажор, способ простой, но, к сожалению, весьма ограниченный. Дело в том, что 60% (к примеру) от 1024 — это одно количество пикселей. А от 1680 (мое разрешение) — совсем другое. При изменении разрешения сайт визуально будет «худеть». Совсем плохо, если он должен быть на всю ширину окна. Начнет отлипать.

  6. Анатолий
    13 лет назад

    Когда-то мне очень понравилось решение:
    http://www.alistapart.com/articles/switchymclayout
    не совсем, может, то что нужно, но, может, сгодится

  7. Dimox,
    Дело хорошее, но, скажем, хорошо отравнять инпуты во всех инкарнациях с применением таблиц гораздо проще. Я, скажем, был сильно удивлен, когда в разметке http://www.artlebedev.ru/ обнаружил тег center. Но потом подумал-подумал, и пришел к выводу, что если это удобно и облегчает жизнь — вполне можно юзать. А к консорциуму мы начнем прислушиваться, когда он предложит простой и приятный способ отбивки дивов по центру:-)

    Кстати. Подсвечивание рамки при ховере на контентном диве — это фича?

  8. 2sordes:

    2. Контентный div должен иметь своим родителем окно бровзера. Для этого его надо объявить сразу за body с position:absolute; и задать справа и слева фиксированные отступы (div будет растягиваться и сжиматься динамически, сам видел!).

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

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

    Я и без таблиц, по-моему, неплохо с ними справляюсь.

    Кстати. Подсвечивание рамки при ховере на контентном диве — это фича?

    Это :hover через CSS.

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

    2gordi:

    Вместо expression лучше JavaScript попробуй:

    Я его пробовал — результат тот же, что и сейчас с expression.

    Может, тебе за основу взять этот пример

    Спасибо! Попробую, посмотрим, что получится.

    В твоем примере при добавлении инфы в правую колонку, серый фон только по области контента идет :)

    Не к тому блоку фон прицепил просто =) Не суть важно.

  9. Делаешь правую колонку необходимой ширины, а для общего в моем примере контейнера, задаешь margin:0 0 0 XXpx;

    Стал пробовать — есть проблема. Заключается в том, что в результате создания этого margin отступ слева присутствует всегда, при любом разрешении. В моем же примере он постепенно исчезает, начиная с 1280×1024 и ниже. Т.е. предложенный тобой вариант при разрешении 1024×768 смотрится совсем уж некрасиво.

    Я так полагаю, у меня этот отступ очень удачно исчезает, благодаря эмуляции минимальной ширины, тобой же однажды и предложенной. Имею в виду технику: body {padding-left: 999px} #wrapper {margin-left: -999px}.

  10. Дима, попробуй эти размеры в процентах подобрать или сантимертрах.
    Чтобы при смене разрешения происходила компенсация не большая.

  11. Только я понять не могу — зачем…
    Привычка верстать фиксированные блоки — это отличная привычка. Не зря все книги похожи одна на одну — потому что так удобнее

  12. Сергей, я как раз в процентах и пробовал.

    2ioni:

    Только я понять не могу — зачем…

    Чтобы выглядело красиво одновременно на разных разрешениях монитора.

  13. Так, Дима.
    Добавь к своим стилям такой expression

    * html #wrapper {
    width:expression(
    (document.compatMode && document.compatMode == ‘CSS1Compat’) ?
    (document.documentElement.clientWidth 1300 ? «1300px» : «auto»)) :
    (document.body.clientWidth 1300 ? «1300px» : «auto»)));
    }
    Размеры нужные поставишь.
    И туда же zoom:1;
    Все должно работать, проверил :)
    Хотя у меня монитор 17″, как на 19″ и более не знаю :)
    Гонял на рзных разрешениях, все вроде получается, как тобой задумано.

  14. Угловые скобки улетели :)

    * html #wrapper {
    width:expression(
    (document.compatMode && document.compatMode == ‘CSS1Compat’) ?
    (document.documentElement.clientWidth < 960 ? "960px" : (document.documentElement.clientWidth > 1300 ? «1300px» : «auto»)) :
    (document.body.clientWidth > 960 ? «960px» :
    (document.body.clientWidth < 1300 ? "1300px" : "auto"))); }

  15. Сергей
    13 лет назад

    По моему лучше привычка резиновый диз, только потестить нужно на разных мониторах и видюхах )

  16. Сергей«…резиновый диз…»
    Вот когда при резиновом дизайне появится возможность пропорционально уменьшать/увеличивать размер шрифта автоматом, то проблема умрет сама по себе.
    Если у вас страница оптимизирована к примеру под 1024*768 и 17″ с резиновой областью контента, то при просмотре/чтении текста при большем разрешении комфорта не будет, это совершенно точно :)
    Размер шрифта уменьшится, строка станет длиннее.
    Предложенное автором решение на мой взгляд имеет право на жизнь, так, как простым способом достигается ограничение размера макета, без использования скриптов.

  17. Сергей, спасибо! Я думаю, что сейчас получился оптимальный вариант. Не хватало только zoom:1, а твой последний вариант скрипта дает наилучший результат. Единственный артефакт, который остается — когда сужаю/расширяю окно, местами возникает горизонтальная прокрутка (у меня монитор 24″). По сути это не так уж и страшно, поскольку при стандартных разрешениях этой прокрутки нет.

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

    Спасибо! ;)

    В общем, будем условно считать, что с задачей справились, а прокрутка в IE6 — это издержки недобраузера.

    Всем спасибо! Тему можно считать закрытой =)

  18. Вместо zoom:1; можно попробовать height:1%;
    Но проблема спонтанного возникновения горизонтальной прокрутки в IE6 похоже не устранима :(
    Что же касается твоей идеи, таким вот образом бороться с не контролируемой растяжкой области контента на всю, ширину окна браузера, считаю ее очень преспективной.
    Решение без скриптов это большой плюс, в общем сижу и думаю, надо все это дело конкретно протестировать, и писать пост :)
    Есть некоторые наметки, ты тоже не останавливайся на достигнутом :)

  19. Dimox, лови:


    <head>
    <style>
    body
    {
    padding:0;
    margin: 0;
    }
    </style>
    </head>
    <body>
    <div style="position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;">
    </body>

    Сохрани код и посмотри полученную веб-страницу:-)
    Решение кросс-браузерное, несмотря на то, что ie6 не понимает min-width.

  20. seo специалисты
    13 лет назад

    Hello!
    Уважаю всех товарищей, что умеют работать с кодом.