Верстаем кроссбраузерный “резиновый” макет страницы
Как вы уже могли заметить, страницы моего блога некоторое время назад стали “резиновыми”. Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью поиска наилучшего решения с вашей помощью, уважаемые читатели и коллеги по цеху =)
Итак…
Задача – создать кроссбраузерный “резиновый” макет с правосторонним сайдбаром, в котором (макете) колонка с контентом при разрешениях экрана 1280×1024 и выше визуально располагалась бы примерно по центру окна браузера.
Особенности
- “Резиновый” макет. Растяжка должна происходить за счет колонки с контентом.
- Прижать все содержимое страницы к правому краю окна браузера при разрешениях экрана 1280×1024 и ниже.
- Слева сделать динамический отступ с целью визуально отцентрировать контент (только на разрешениях 1280×1024 и выше).
- Ограничить максимальную ширину страницы для больших разрешений экрана (в моем примере – 1300 пикселей).
- Добиться кроссбраузерности.
- Использовать минимальное количество тегов, скриптов и хаков.
Если говорить только о современных браузерах (Opera, FireFox, Safari, Chrome, IE8b2), то они вообще не создают никаких проблем, и поставленная задача в них решается налегке, даже в IE7 все работает со стандартными стилями. Проблема заключается, как обычно, в IE6, поэтому, собственно, вся работа сворачивается к изобретению “костылей” для этого браузера.
Примеры
То, что получилось у меня, вы можете наблюдать прямо на моем блоге, либо посмотреть отдельно созданный пример.
Максимум, что мне удалось сделать для IE6 – применить expression на минимальную и максимальную ширину, но результат оставляет желать лучшего – при сужении/расширении окна браузера он ведет себя неадекватно.
В общем, взываю к вашей помощи, уважаемые коллеги ;) Помогите, пожалуйста, красиво решить задачу.
P.S. По секрету всему свету – возлагаю большие надежды на Сергея, поскольку знаю, что он подобные вещи решает на “ура!” =)
Смотрите также
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Тег <hr /> и кроссбраузерный отступ
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
Комментарии (25)
Мажор, способ простой, но, к сожалению, весьма ограниченный. Дело в том, что 60% (к примеру) от 1024 – это одно количество пикселей. А от 1680 (мое разрешение) – совсем другое. При изменении разрешения сайт визуально будет “худеть”. Совсем плохо, если он должен быть на всю ширину окна. Начнет отлипать.
Когда-то мне очень понравилось решение:
http://www.alistapart.com/articles/switchymclayout
не совсем, может, то что нужно, но, может, сгодится
Dimox,
Дело хорошее, но, скажем, хорошо отравнять инпуты во всех инкарнациях с применением таблиц гораздо проще. Я, скажем, был сильно удивлен, когда в разметке http://www.artlebedev.ru/ обнаружил тег center. Но потом подумал-подумал, и пришел к выводу, что если это удобно и облегчает жизнь – вполне можно юзать. А к консорциуму мы начнем прислушиваться, когда он предложит простой и приятный способ отбивки дивов по центру:-)
Кстати. Подсвечивание рамки при ховере на контентном диве – это фича?
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.
Не работает все это в ie6,7..
Hello!
Уважаю всех товарищей, что умеют работать с кодом.
Советую почитать http://www.webmascon.com/topics/coding/13a.asp
Roma, что хотели этим сказать? Указанную статью я уже давно прочитал.
Привет, всем!
Вот натолкнулся на решение проблемы “кроссбраузерный, резиновый макет страницы”.
Статья: 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
спасибо огромное за способ с отсупами по краям
очень нужно было