Горизонтальное центрирование фиксированных сайтов
Четверг, 20 августа 2009
Одна из самых очевидных вещей, которая должна присутствовать в чек-листах перед запуском сайта у каждого разработчика — это горизонтальное выравнивание сайта фиксированной ширины в браузере. Даже не думал что буду писать об этом в блоге, но тем не менее проблема встречается.
В последнее время, разрешение мониторов у пользователей растёт быстрее, чем увеличивается и принимается за стандарт ширина фиксированных сайтов. И если сейчас её принято верстать под 1024 px, реже под 1280 px, то большой процент пользователей уже сидит на разрешениях экрана от 1440 px и выше. Сейчас уже никого не удивишь домашним монитором в 20-22-24 дюйма.
Обычно пользователь сидит прямо перед монитором и смотрит в центр экрана, а сайты «прибитые» к левому или к правому (да, видел и такие), оставляют не очень хорошее впечатление. Приходится увеличивать шрифт, чтобы прочитать, что же там скрывается в «отдалённых районах», смещать голову ближе к краю монитора и делать прочие ненужные телодвижения для работы с сайтом.
Особенно это заметно в блогах, где много интересного контента, но читать его так, как предлагает автор довольно проблематично или просто неудобно. Длинная лента текста в несколько экранов, смещённая от центра в сторону уменьшает скорость чтения. Для таких случаев я даже сделал свой reader.css, и периодически приходится его подключать к проблемным сайтам вместо стандартных стилей.
Отсюда несколько наглядных картинок для примера:
Вывод один: чем больше разрешение экрана у пользователя, тем больше неудобств он испытывает при просмотре нецентрированных страниц.
Для полноты статьи и её практической ценности вот ссылка на методы CSS-выравнивания. Какой из них выбрать, решать вам. Я предпочитаю первый, с небольшим ухищрением для IE6.
P.S.: Для тех, кто утверждает, что «для работы не нужно разворачивать браузер на весь 2x-дюймовый экран». Согласен. Для работы. Но, как показывают личные наблюдения, пользователи предпочитают не экономить место, если просто серфят для удовольствия.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Ну не знаю... margin:0px auto; для div-а с контентом ещё ни разу не подвёл...
даже не представляю зачем остальные способы, особенно с отрицательным margin — всё равно что чесать правой рукой левое ухо — вроде и реально, но нафига если есть левая рука (всякие физические отклонения не рассматриваем)?
margin: 0 auto; — непонятная для IE6 инструкция. Остальное — просто, как возможные способы центрирования.
У способа с отрицательным маргином есть баг: если сайт не влезает по ширине в окно браузера, горизонтальный скролл не появляется. Я в свое время пересел отрицательного маргина на первый способ как более надежный.
Сдвоенный способ — центрирование для IE и margin: auto для всех пока меня не подводил :)
IE6 понимает margin: 0 auto;. Не понимают ИЕ5.5 и ниже...
А что там с IE6 и margin: 0 auto; не так?
На IE 6 можно уже не ориентроваться — он постепенно отживвает свои срок)
Тут c IE6 (возможно что и 7, 8, не проверял правда) такое дело, что если включен Quirks Mode, то значения auto он не понимает. Для правильной работы нужен режим совместимости.
Подробнее тут — haslayout.net/css/No-Auto...enter-Pseudo-Bug
@Octane, а за что тебя Akismet не любит?
>> @Octane, а за что тебя Akismet не любит?
Не знаю, наверное, раньше указывал другой E-mail или сайт в комментариях на этом блоге.
Пользователи с Востока будут приятно удивлены сайтами прижатыми к правой части экрана)
Всем успехов в новом году!
Информация на сайте должна растягиваться! делать статичные скриншоты легче, но такие сайты не удобные.
а чего это яндекс с гуглом стали к левому краю прижиматься при выдаче и не растягиваютя теперь как раньше?
Статистика Рунета (рустат) за июль 2010 гола гласит, что пользователей с разрешением монитора > 1024 около 40 %
Инфа к размышлению.
А если, например, для Joomla изначально устанавливать резиновый шаблон, который подстраивается под монитор. Такое возможно?
Сейчас лучше делать универсальные сайты или использовать шаблоны, чтобы всем подходили или хотябы большинству пользователей...