adminvps

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

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

Комментарии (27)
  1. 1

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

  2. 2

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

  3. 3

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

  4. 4
    @

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

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

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

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

  5. 5
    @

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

  6. 6
    @

    Посмотрел, понравилось, завтра на свежую голову разберу по косточкам :)
    Вместо expression лучше JavaScript попробуй:


    <script type="text/javascript">
    window.attachEvent('onload', width);
    window.attachEvent('onresize', width);
    function width(){
    document.getElementById('width_ie6').style.width = (
    (document.documentElement.clientWidth || document.body.clientWidth) < 930) ? '930px' : (
    (document.body.clientWidth > 1280) ? '1280px' : '100%');
    };
    </script>

    В html-коде id=»width_ie6″ подставить куда надо и все :)
    Сейчас тоже проблему разных разрешений решаю, при 1024*768 на весь экран, а при большем по центру.
    К моему последнему посту про эмуляцию position:fixed
    ох, как надо обзавестись подобной фишкой :)

  7. 7
    Анатолий

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

  8. 8
    @

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

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

  9. 9
    @

    Может, тебе за основу взять этот пример
    Делаешь правую колонку необходимой ширины, а для общего в моем примере контейнера, задаешь margin:0 0 0 XXpx;
    Далее над этим блоком вешаешь header, а под ним footer, они будут на всю ширину окна браузера всегда, но можно тот же margin и width задать для них, такой же, что у осовного центрального блока, тогда вровень с ним будут.
    Одинаковая высота колонок, expression там для IE6 рабочий :)
    В твоем примере при добавлении инфы в правую колонку, серый фон только по области контента идет :)
    footer, что там у меня убьешь :)
    Попробуй, должно не плохо получиться.

  10. 10

    2sordes:

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

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

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

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

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

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

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

    2gordi:

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

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

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

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

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

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

  11. 11

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

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

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

  12. 12
    @

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

  13. 13

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

  14. 14

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

    2ioni:

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

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

  15. 15
    @

    Так, Дима.
    Добавь к своим стилям такой 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″ и более не знаю :)
    Гонял на рзных разрешениях, все вроде получается, как тобой задумано.

  16. 16
    @

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

    * 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"))); }

  17. 17
    Сергей

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

  18. 18
    @

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

  19. 19

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

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

    Спасибо! ;)

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

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

  20. 20
    @

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