Pull to refresh

Вёрстка c «Ушами»

Reading time 2 min
Views 9K
Очень часто фантазия человека, разрабатывающего макет сайта, не ограничивается шириной 1024px, при этом требуется, чтобы сайт выглядел достойно на всех разрешениях и соответствовал полёту мысли дизайнера.

Проблему можно представить графически так:
image

Задача вёрстки заключается в следующем:
  • — независимо от разрешения (размера она браузера), информативная часть сайта находилась посередине;
  • — справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном не уместившаяся часть должна прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);;
  • — страница должна быть резиновой от 680px до 1000px.

Работает для FF3, FF4, IE8 и почти для Opera.

Решение данной задачи можно представить так:
image
  • #corper — самый внешний блок, обрезает то, что не входит в окно браузера;
  • #warp — относительно позиционированный по середине экрана блок в 980px, контейнер для #content и #head;
  • #head — блок заголовка, контейнер для #left-head, #right-head;
  • #left-head — левое «ухо»;
  • #right-head — правое «ухо»;
  • #content — контент.


Смысл в том, чтобы сделать «уши» (#left-head, #right-head) расположенными абсолютно блока #warp, который расположен относительно экрана по середине и вынести их за пределы #head с помощью отрицательных полей left и right. ПРи этом

UPD: Такой способ актуален лишь когда имеется повторяющийся фон который должен быть на body.
UPD2: Спасибо всем пользователям за критику. Она пошла в пользу. Немного подумав, реализовал модель с резиной (см. второй пример). Код выкладывать не буду т.к. все знают где кнопка «Vew Source».
UPD3: Пример из практики где такая вещь может пригодиться.
image

Рабочий пример: http://8xx8.ru/habrahabr/ears/.
Рабочий пример ушей c резиной 680px 1000px: http://8xx8.ru/habrahabr/ears/index1.html.
Tags:
Hubs:
+34
Comments 80
Comments Comments 80

Articles