Верстаем кроссбраузерный “резиновый” макет страницы
Как вы уже могли заметить, страницы моего блога некоторое время назад стали “резиновыми”. Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью поиска наилучшего решения с вашей помощью, уважаемые читатели и коллеги по цеху =)
Итак…
Задача - создать кроссбраузерный “резиновый” макет с правосторонним сайдбаром, в котором (макете) колонка с контентом при разрешениях экрана 1280×1024 и выше визуально располагалась бы примерно по центру окна браузера.
Особенности
- “Резиновый” макет. Растяжка должна происходить за счет колонки с контентом.
- Прижать все содержимое страницы к правому краю окна браузера при разрешениях экрана 1280×1024 и ниже.
- Слева сделать динамический отступ с целью визуально отцентрировать контент (только на разрешениях 1280×1024 и выше).
- Ограничить максимальную ширину страницы для больших разрешений экрана (в моем примере - 1300 пикселей).
- Добиться кроссбраузерности.
- Использовать минимальное количество тегов, скриптов и хаков.
Если говорить только о современных браузерах (Opera, FireFox, Safari, Chrome, IE8b2), то они вообще не создают никаких проблем, и поставленная задача в них решается налегке, даже в IE7 все работает со стандартными стилями. Проблема заключается, как обычно, в IE6, поэтому, собственно, вся работа сворачивается к изобретению “костылей” для этого браузера.
Примеры
То, что получилось у меня, вы можете наблюдать прямо на моем блоге, либо посмотреть отдельно созданный пример.
Максимум, что мне удалось сделать для IE6 - применить expression на минимальную и максимальную ширину, но результат оставляет желать лучшего - при сужении/расширении окна браузера он ведет себя неадекватно.
В общем, взываю к вашей помощи, уважаемые коллеги ;) Помогите, пожалуйста, красиво решить задачу.
P.S. По секрету всему свету - возлагаю большие надежды на Сергея, поскольку знаю, что он подобные вещи решает на “ура!” =)
Конечно дело вкуса, но align=”justify” всё портит.
p.s. лебедев и ко за такое сильно матерят и отрывают руки :)
Капец устал глазами центровать твой блог.Он раз 5 перескакивал то к правой стороне то к левой:)А почему ты не хочешь все это чудо запихнуть в таблицы с процентным разбиением.Резиновые таблицы и центруются сами и легче в управлении.Может я не прав,делаешь одну таблицу главную,делишь на 2 столбца,даешь 60% контент и 40% сайдбар.Границы таблицы делаешь невидимыми.Можно 70 и 30.И все,при открытии и сворачивании все отлично.
Мажор, таблицами при разметке не пользуюсь принципиально.
Блин, такую телегу набил, а коммент не прошел. Абыдна, да.
Если вкратце - есть два способа. Извращенный и мега-извращенный:-)
1. Dead centre тебе в помощь для начала: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Далее тебе надо будет написать скрипт, определяющий клиентскую ширину окна. Задать фиксированный марджин слева, приплюсовать к нему ширину сайдбара справа. Сумму вычесть из рассчитанной ширины окна. И уже ее использовать для позиционирования контентного блока (см. Dead Centre). Под аяксом и асп подобная задача решаема. Сам именно так и решал:-)
2. Контентный div должен иметь своим родителем окно бровзера. Для этого его надо объявить сразу за body с position:absolute; и задать справа и слева фиксированные отступы (div будет растягиваться и сжиматься динамически, сам видел!).
Мажор, способ простой, но, к сожалению, весьма ограниченный. Дело в том, что 60% (к примеру) от 1024 - это одно количество пикселей. А от 1680 (мое разрешение) - совсем другое. При изменении разрешения сайт визуально будет “худеть”. Совсем плохо, если он должен быть на всю ширину окна. Начнет отлипать.
Посмотрел, понравилось, завтра на свежую голову разберу по косточкам :)
Вместо expression лучше JavaScript попробуй:
2
3
4
5
6
7
8
9
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
ох, как надо обзавестись подобной фишкой :)
Когда-то мне очень понравилось решение:
http://www.alistapart.com/articles/switchymclayout
не совсем, может, то что нужно, но, может, сгодится
Dimox,
Дело хорошее, но, скажем, хорошо отравнять инпуты во всех инкарнациях с применением таблиц гораздо проще. Я, скажем, был сильно удивлен, когда в разметке http://www.artlebedev.ru/ обнаружил тег center. Но потом подумал-подумал, и пришел к выводу, что если это удобно и облегчает жизнь - вполне можно юзать. А к консорциуму мы начнем прислушиваться, когда он предложит простой и приятный способ отбивки дивов по центру:-)
Кстати. Подсвечивание рамки при ховере на контентном диве - это фича?
Может, тебе за основу взять этот пример
Делаешь правую колонку необходимой ширины, а для общего в моем примере контейнера, задаешь margin:0 0 0 XXpx;
Далее над этим блоком вешаешь header, а под ним footer, они будут на всю ширину окна браузера всегда, но можно тот же margin и width задать для них, такой же, что у осовного центрального блока, тогда вровень с ним будут.
Одинаковая высота колонок, expression там для IE6 рабочий :)
В твоем примере при добавлении инфы в правую колонку, серый фон только по области контента идет :)
footer, что там у меня убьешь :)
Попробуй, должно не плохо получиться.
2sordes:
Неплохо бы пример такой реализации. На словах мне сложно понять.
Я и без таблиц, по-моему, неплохо с ними справляюсь.
Это :hover через CSS.
Анатолий, пример интересный, конечно, но я бы не хотел привязывать динамичность страницы к скрипту.
2gordi:
Я его пробовал - результат тот же, что и сейчас с expression.
Спасибо! Попробую, посмотрим, что получится.
Не к тому блоку фон прицепил просто =) Не суть важно.
Стал пробовать - есть проблема. Заключается в том, что в результате создания этого margin отступ слева присутствует всегда, при любом разрешении. В моем же примере он постепенно исчезает, начиная с 1280×1024 и ниже. Т.е. предложенный тобой вариант при разрешении 1024×768 смотрится совсем уж некрасиво.
Я так полагаю, у меня этот отступ очень удачно исчезает, благодаря эмуляции минимальной ширины, тобой же однажды и предложенной. Имею в виду технику: body {padding-left: 999px} #wrapper {margin-left: -999px}.
Дима, попробуй эти размеры в процентах подобрать или сантимертрах.
Чтобы при смене разрешения происходила компенсация не большая.
Только я понять не могу - зачем…
Привычка верстать фиксированные блоки - это отличная привычка. Не зря все книги похожи одна на одну - потому что так удобнее
Сергей, я как раз в процентах и пробовал.
2ioni:
Чтобы выглядело красиво одновременно на разных разрешениях монитора.
Так, Дима.
Добавь к своим стилям такой 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″ и более не знаю :)
Гонял на рзных разрешениях, все вроде получается, как тобой задумано.
Угловые скобки улетели :)
* 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”)));
}
По моему лучше привычка резиновый диз, только потестить нужно на разных мониторах и видюхах )
Сергей“…резиновый диз…”
Вот когда при резиновом дизайне появится возможность пропорционально уменьшать/увеличивать размер шрифта автоматом, то проблема умрет сама по себе.
Если у вас страница оптимизирована к примеру под 1024*768 и 17″ с резиновой областью контента, то при просмотре/чтении текста при большем разрешении комфорта не будет, это совершенно точно :)
Размер шрифта уменьшится, строка станет длиннее.
Предложенное автором решение на мой взгляд имеет право на жизнь, так, как простым способом достигается ограничение размера макета, без использования скриптов.
Сергей, спасибо! Я думаю, что сейчас получился оптимальный вариант. Не хватало только zoom:1, а твой последний вариант скрипта дает наилучший результат. Единственный артефакт, который остается - когда сужаю/расширяю окно, местами возникает горизонтальная прокрутка (у меня монитор 24″). По сути это не так уж и страшно, поскольку при стандартных разрешениях этой прокрутки нет.
Спасибо! ;)
В общем, будем условно считать, что с задачей справились, а прокрутка в IE6 - это издержки недобраузера.
Всем спасибо! Тему можно считать закрытой =)
Вместо zoom:1; можно попробовать height:1%;
Но проблема спонтанного возникновения горизонтальной прокрутки в IE6 похоже не устранима :(
Что же касается твоей идеи, таким вот образом бороться с не контролируемой растяжкой области контента на всю, ширину окна браузера, считаю ее очень преспективной.
Решение без скриптов это большой плюс, в общем сижу и думаю, надо все это дело конкретно протестировать, и писать пост :)
Есть некоторые наметки, ты тоже не останавливайся на достигнутом :)
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.
Hello!
Уважаю всех товарищей, что умеют работать с кодом.
Советую почитать http://www.webmascon.com/topics/coding/13a.asp
Roma, что хотели этим сказать? Указанную статью я уже давно прочитал.
Не работает все это в ie6,7..
Привет, всем!
Вот натолкнулся на решение проблемы “кроссбраузерный, резиновый макет страницы”.
Статья: http://blog.sjinks.org.ua/css/209-cross-browser-liquid-three-column-layout-full-height/
Пример: http://blog.sjinks.org.ua/test/3col/3col_h100.html