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

    Очень часто фантазия человека, разрабатывающего макет сайта, не ограничивается шириной 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.
    Share post

    Similar posts

    Comments 80

      +9
      В опере есть горизонтальная прокрутка справа.
        +6
        Притом, что вёрстка таки режется: lh4.ggpht.com/_1_TkZrguBPE/TMXAcZaVbWI/AAAAAAAAAVo/JaVIzpn1IgM/s512/tmp.1JpKpfRtuN.png
          0
          аналогично. опера 11, кубунту 10.04 х86_64
            +3
            Проблему с оперой ршить не могу. Кто поможет, буду рад.
              +2
              #corper {
              min-width: 680px;
              overflow-x: hidden;
              overflow-y: hidden;
              position: relative;
              }
                +1
                Логика простая. Нужен родительский блок для всей конструкции, у которого будет position:relative; overflow:hidden; width:100%;
                В вашем первом примере нужно только добавить к #corper{ position: relative; width: 100%; } — скролл исчезнет.
          +15
          А зачем разные уши (лефт, райт)?
          делаем div, например #header, шириной в 100%, там делается нужный фон, а внутрь вкладываем, например div с классом .content с «margin: auto auto;» в свойствах CSS.
          ну и doctype xhtml-евский, чтобы IE нормально понимал, что нужно отцентровать. и всё.
          что-то подобное, если есть желаение, можете посмотреть у меня на сайтах (урлы в профиле, сюда не скидываю в целях сохранения [censored])
            –37
            [offtopic]и чтоб ты изошел поносом, упырь влепивший минуса в карму и ничего не ответевший на коммент[/offtopic]
              +3
              Успокойтесь Вы, не в карме счастье. У меня тут был акк с сотней оной и что? Сейчас хочу получить плашку тролля адекватными комментариями, этакий челлендж.
                –8
                а я хочу сейчас пост интересный запостить, посему нужно в 5+ точно быть :)
                  0
                  Я понаписал 20 интересных постов, получил бан. Больше писать желания не возникало ;)
                    0
                    Согласен, как-то глупо, что-ли, получить минусовую карму за собственное мнение… Интересный форум получается.
                  0
                  — Ты с ума сошел?! А в чем же еще?! (С)
                    –1
                    О, это легко! Просто заходите в топики, где линуксоиды рассказывают о том, как им сухо и комфортно и давайте ссылки на эксплоиты для ядра, что регулярно вылазят. А потом добивайте их статьями на тему, что в исходниках некоторые ошибки не найти, ибо виноват компилятор, который по разному обрабатывает один и тот же код, но по-разному написанный.

                    И будет у вас карма улетать в самое дно как у меня — со скоростью света. Главное фактов приводить по-больше и красноглазикам тогда голову просто напрочь сносит.

                    Вот смотрите, сейчас опять у меня карма упадёт и текст прозрачным станет.
                      0
                      Так не интересно. Надо, чтобы за комменты было много плюсов, но у кого-то одного случалась очень сильная попоболь, провоцирующая насрать в кармочку. Года два назад таким методом набрать -100 было бы невозможно ввиду того факта, что не нашлось бы и 50 неадекватов. Сейчас их тут сотни.
                    +4
                    а вы Чаку пожалуйтесь — думаю он найдет и исправит того минусятора.
                      –8
                      Предлагаю всем поставить в карму этому товарищу по плюсу.

                      mcdb, не знаю кто тебе в карму так сказать «плюнул», но я поставил тебе плюс. Не обижайся на людей.

                      Добрее надо быть, добрее.
                        –5
                        Так это не в ваш адрес было :)))
                        Я вас тоже оценил положительно, так как вы молодец и стараетесь делать хорошее дело.
                        Просто вот сейчас тут действительно готовлю материал к публикации, посему и приходится нервничать :)
                      0
                      Просто doctype достаточно, xhtml тут не причём
                        0
                        Остальное верно, кстати. У автора же бред какой-то
                        –3
                        А в чём смысл?
                          +4
                          Отсутствие горизонтальной прокрутки при размере окна меньше 980px
                          IE 8.0 / Chrome 8.0 dev (Win 7)
                            0
                            исправил
                            +6
                            Плохо получилось. Поторопился.
                            Надо подумать. На счёт иправления.
                              +2
                              Не проще ли сделать одну картинку фоном на тег <BODY>? Тогда фон удобнее будет заменять, как, например, сделано на многих киносайтах.
                                0
                                Я имел ввиду когда ещё есть фон повторяющийся из небольшой картинки например. Тут факт в том что получается экономия, у нас две небольшие картинки на «уши» и одна на повторяющийся фон.

                                А в случае с одной большой она по сути получиться больше по размеру (в килобайтах).
                                  +1
                                  Тогда, если следовать такой логике, «уши» совсем не нужны, достаточно иметь внешний слой-обёртку (в данном случае #corp). Нужную картинку повесить ему на бэкграунд. Одна полупрозрачная картинка будет весить меньше, чем две полупрозрачных.
                                    0
                                    При желании можно псевдоэлементы ::before / ::after использовать, вместо ненужных div'ов.
                                      0
                                      Не всегда счастье только в килобайтах, есть еще
                                      1. Количество запросов.
                                      2. Размер заголовков запросов.
                                      Заголовки, допустим, можно померять, а вот со скорость установки нового соединения как повезет… Мое имхо: лучше +2-5 КБ, чем лишний запрос.
                                        0
                                        Лирическое отступление:
                                        Сейчас на работе разрабытываем очередную версию модуля для CMS, руки несколько связаны: никаких CDN, никакой свободы с настройкой дополнительных субдоменов. Когда я увидел около 90 запросов к статическим ресурсам, в каждом из которых отправляется около 2 КБ печенья, я рыдал. Это количество удалось снизить до 30, но все-равно, присутствует некая неудовлетворенность…
                                      +1
                                      не всегда это подойдёт.
                                      например самый простой случай, когда фон всегда должен быть по бокам, а сам сайт растягивающийся.
                                        0
                                        Согласен. Отвечал по данному примеру, где ширина фиксированная.
                                    +3
                                    Я всего лишь начинающий, и, возможно, сейчас фигню скажу, но не легче замостить по фону одну повторяющуюся картинку, а основной контент выровнять по центру? Просто то что вы предлагается выглядит как костыли.
                                      0
                                      Нельзя, если к примеру есть падающая тень на этот замощёный фон, причём тень только от хеадера, а от контента нёт. Получается, что изображения с тенями нужно прилепить только к хеадеру и ещё хеадер по величине должен совпадать с контентом.
                                        0
                                        Смотрите пример который я добавил к статье.
                                        +3
                                        Это не очень хорошо когда справа и слева видно по пол-уха. Как бы намекает: «Хреновый у тебя нетбук. Что, развернул на весь экран, а ухи полностью все равно не видно?»

                                        Лучше их скрывать насовсем или убирать вниз/центр, как тут: goo.gl/86W7
                                          0
                                          Классно. Спасибо за совет.
                                          0
                                          В Опере выглядит криво — уши не убираются, скролл горизонтальный появляется
                                          habreffect.ru/files/b6e/d5ce74be3/markup-bug.jpg
                                            +1
                                            Как и пишут здесь люди, самым беспроблемным вариантом это помещение «ушей» фоновыми изображениями во вложенные блоки, сколько нужно, а уж в внутри этой «матрешки» поместить #content.

                                            В принципе и предложеный вариант жизнеспособен, если побороть все особенности «одинакового» позиционирования в браузерах, но только в случае, если ушам нужно быть интерактивными. (Не представляю такого изврата, но по закону подлости завтра же подвернется)
                                              +3
                                              Просто интересно :) А почему warp и corp?
                                              Коли уж так, то напрашиваются haed и cnotent :)
                                                –1
                                                > А почему warp и corp?
                                                мне кажется, что эти название даны в честь OS/2 Warp и корпорации её делавшей :)
                                                ну это так, первые ассоциации :)
                                                  0
                                                  Это от Warhammer 40.000. Из варпа хаоситы лезут.
                                                    0
                                                    Точно. Угадал.
                                                  +2
                                                  А что тут такого волшебного?? ) )
                                                  Всё обычно. Так, как и должно работать. Overflow, position: absolute…
                                                    +1
                                                    Непонятно, зачем. Проще использовать обертки и центрированный контент. А если «уши» со смыслом (баннеры) — то яваскриптом проверяем, лезут ли они в экран, и если лезут — то позиционируем абсолютно и показываем. Для баннерных систем, запрещающих прятать баннеры — показываем снизу, если по бокам не влезают.
                                                      0
                                                      Мда, супер конечно, я-то надеялся! Блок фиксированной ширины любой дурак отцентрирует, а вот попробуйте тоже сделать при условии того, что основной блок должен быть резиной, скажем, от 960px до 1300px. Вот это задача интересная (и насколько мне известно не имеющая решения).
                                                        +1
                                                        Довольно странное решение несуществующей проблемы. Дело в том, что нужно идти от задачи и все случаи когда что-то должно быть за контентом нельзя косить под одну гребенку. В большинстве случаев подойдет и max-width и margin:0 auto для body и некий бэкграунд для html.

                                                        Да, поздравляю, вы открыли для себя overflow:hidden, и отрицательные значения свойств, но чего вы добились — непонятно.

                                                        А вот проблем в вашей верстке — масса. Начать с того, что когда окно браузера меньше 980px у нас нет горизонтальной прокрутки и совершенно непонятно, как мне смотреть этот сайт со своей нокии, у которой разрешение 640x480. И почему верстка не резиновая это тоже большой вопрос.
                                                          0
                                                          Обычно, такие уши представляют собой простой фон и причин, делать его как-либо иначе, кроме как, фоном у body или у какого-нибудь родительского контейнера я не вижу.
                                                          з.ы. lfet-head и rgiht-haed забыли =)
                                                            –4
                                                            1. В FF 3.6.10 ваши «уши» никуда не прячутся если ширина экрана меньше 1220px — хотя судя по постановке задачи вы именно этого и добивались
                                                            2. Я, хоть убейте, не понимаю почему не используется javascript при решении этой задачи.
                                                            3. Задавать #corper {overflow:hidden;} //style.css (строка 36) мягко говоря глупо — потому что чтобы вы туда ни прописали оно и так будет прятаться — потому что ширина div-а равна ширине окна браузера, а за шириной браузера вы и так ничего не увидите.

                                                            Да и вообще средствами css решать задачи, с которыми элементарно справляется javascript глупо и контрпродуктивно (пока во всяком случае — css3 пока в расчёт не берём)
                                                              0
                                                              1. Прекрасно прячется.
                                                              2. Javascript конечно можно использовать. Флаг в руки, используйте.
                                                              3. Он нужен для того что бы обрезать абсолютно позиционированные блоки («уши»), которые выходят за рамки экрана. Кстати по той же причине и остаётся полоса прокрутки у оперы, потому что опера думает что страница, шире, хотя на самом деле нет, потому что обрезана #corper'ом.
                                                              Скачайте пример, уберите #corper и посмотрите сами.
                                                                0
                                                                  0
                                                                  В статье речь идет о том, что за край экрана без полосы прокрутки прячется та часть ушей, что не поместилась на экране. а не все уши.
                                                                    0
                                                                    так я об этом и говорю — задача из начала статьи не выполнена — показывать уши либо целиком, если полностью влазят на экран, либо не показывать их вообще.

                                                                    кстати пример из UPD2 тоже так и не решил именно такую задачу.

                                                                    вы КО?

                                                                    ну если автора статьи всё страивает — хорошо :)
                                                                      0
                                                                      Задача выполнена именно так, как она поставлена.
                                                                    +1
                                                                    Оно так и должно работать. Я не писал что ушидолжны пропасть, они аккуратно уходят за экран. Если подвигать размером окна браузера это будет заметно, причём они убираются так, что контент остаётся по середине.

                                                                    И, внимание, для всех. Возможно я не правильно подобрал значения максимальной ширины и по этому на некоторых разрешениях выглядит некрасиво, но я показываю технологию, которою можно взять на вооружение если правильно применить, не не готовый к продаже продукт.

                                                                    p.s. думайте своими мозгами…
                                                                      0
                                                                      — справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);

                                                                      видимо у вас какое-то своё толкование слова «прятаться»…

                                                                      вообще хозяин-барин — вы решили для себя поставленную себе же задачу (возможно с помощью коллективного разума) — это просто отлично. Хабр для этого и задумывался.

                                                                      Удачи :)
                                                                    0
                                                                    Кстати…
                                                                    overflow: hidden;
                                                                    и
                                                                    /* Определяем минимальню ширину при которой появляется полоса прокрутки */
                                                                    несовместимы и никакой полосы прокрутки не будет!

                                                                    Вот вам из 7-го хрома
                                                                    clip2net.com/clip/m11645/1288040066-clip-30kb.png
                                                                      0
                                                                      а вот та же страница там же, но с отключенным overflow
                                                                      clip2net.com/clip/m11645/1288040204-clip-62kb.png
                                                                        0
                                                                        Там просто нехватало min-width свойства у #corp. В то время, как в коде стати оно было. Просто я забыл записать его в css файл на сервере.

                                                                        Возрадуйтесь полосе прокрутки.
                                                                        +1
                                                                        Я, хоть убейте, не понимаю почему не используется javascript при решении этой задачи.

                                                                        После этого предложения я перестал читать ваш комментарий
                                                                      0
                                                                      Сегодня полдня ломал голову, как бы мне пустить широкие поля вокруг всего контента (исключая шапку и подвал — там всё просто), но чтобы они были видны только при разрешении больше 1024 по горизонтали. Этакий padding, но без горизонтальной прокрутки и без абсолютного позиционирования.

                                                                      Вечером зашел на Хабр — уже почти обрадовался, что вот оно решение. А нет, не то.

                                                                      С контентной частью делать через фоновый рисунок как-то не спортивно.
                                                                        0
                                                                        Если основной контент фиксированной ширины — то и обсуждать нечего, если резина — то задача решения не имеет, увы.
                                                                          0
                                                                          Как вариант можно «уши» сразу к варпу прилепить.
                                                                          +1
                                                                          Исправьте, пожалуйста: «посредине» вместо «по середине». Режет глаз.
                                                                            0
                                                                            Исправил.
                                                                            +4
                                                                            Нет никакой экономии, только лишняя картинка и лишний запрос и куча лишних блоков и кода. Рисуйте большую фоновую картинку с «ушами» и дыркой в центре с ширину контента (дырка — это один цвет для лучшей компрессии) и все, готово. Ширину «дырки» нужно сделать на пару пикселей меньше ширины контента, чтоб из-за погрешности в округлении не было заметно скача в 1px при ресайзе окна браузера.
                                                                            Если на фоне лежит текстура — то просто надо ее нарисовать в фотошопе из центра макета (по дефолту паттерн множится из 0,0) и совместить потом с картинкой с ушами. Не нужно все ТАК усложнять как в вашем примере.
                                                                              0
                                                                              Круто, спасибо! Не люблю верстку, но всегда приходится с ней возиться, полезная статья!
                                                                                0
                                                                                А возможно ли решить через фреймование при помощи clip?
                                                                                  0
                                                                                  Провальная идея.
                                                                                  0
                                                                                  Тоже пытался решить данную задачу для IE7. Так и не смог убрать горизонтальный скролл.
                                                                                    0
                                                                                    Задачу не решил, но провернул пару забав. Исходники тут:
                                                                                    pastie.org/1249167
                                                                                    pastie.org/1249165
                                                                                    — картинки все на «Хабрэффекте»
                                                                                      0
                                                                                      Cделал так www.novopavlovsk.ru
                                                                                        +1
                                                                                        А footer прижать к низу ;)?
                                                                                          0
                                                                                          месяц назад искал решение данного вопроса, в итоге забил на эти уши)
                                                                                            +2
                                                                                            corper — croper
                                                                                            warp — wrap
                                                                                              +2
                                                                                              кроссбраузерности IE8+ — метка «не для практики».
                                                                                                0
                                                                                                вот решение для ие7 с подвалом прижатым книзу и контентом идущим первым
                                                                                                dl.dropbox.com/u/585674/test/index.html
                                                                                                0
                                                                                                картинки отвалились :(
                                                                                                  0
                                                                                                  И ссылки нерабочие. Наверное, всё-таки выложить код (а не говорить, что все знают, где кнопка View Source) было бы правильно.
                                                                                                  Сегодня, всего через 1,5 года, ценность статьи нулевая. Автору незачот.

                                                                                                Only users with full accounts can post comments. Log in, please.