19 января 2010 в 10:31

Колоночная верстка

CSS*
Существует много способов по верстке колоночных макетов. Уже не один нос разбит в течении холиваров, разожженных по поводу использования тех или иных методов. Казалось бы, что все должно быть предельно ясно и понятно, но все-равно возникает много трудностей. Я хочу и свою лепту вложить во всеобщее благое дело, и потому потратил относительно немного времени на эксперименты, которые привели меня к созданию еще одного метода, в котором есть следующие плюсы и минусы:

Плюсы
  • Есть прижимающийся к полу футер
  • Колонки меню растягиваются по 100% высоте
  • Колонок может быть сколько душе угодно
  • Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
  • Ширина как резиновая, так и фиксированная
  • Критический минимум хаков
  • Не используется Javascript
  • Не используются бекграундовые изображения для создания эффекта колонки
  • Никаких таблиц
  • Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы
  • Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
  • Есть несколько абсолютно-позиционируемых блоков

Сразу хочу сказать, что любая конструктивная критика приветствуется. Если вы где-то когда-то видели что-то похожее — давайте пруф. Я еще с детства любил велосипеды изобретать). Также приветствуются советы по улучшению примера. Доведем вместе до высокого уровня. Будет время — сделаю что-то на подобие генератора верстки, как у ребят из csstemplater.com, чьим инструментом я время от времени пользуюсь и всем всячески рекомендую. Если вам статья показалась многословной — прокрутите вниз — там я выложил несколько ссылок на сделанные по данной методике примеры. Итак, приступим к делу…

Этап 1: Прилипающий к низу окна футер


В нашей работе прилипающий футер — это одна из наиболее распространенных тем. Что же для него надо?
  • 100% высота html и body
  • Минимум 3 блока — один на контейнер, содержащий все элементы, второй — непосредственно сам футер
  • Ну и третий, нужный для расположения в нем контента страницы

Разметка в таком случае будет похожей на:
  1. <div class="wrapper">
  2.   <div class="container">
  3.     Контент
  4.   </div>
  5. </div>
  6.  
  7. <div class="footer">
  8.   Прижимающийся футер
  9. </div>
* This source code was highlighted with Source Code Highlighter.

И, соответственно, CSS для нее:
  1. html, body {
  2.         min-height: 100% !important;
  3.         min-height: auto;
  4.         height: 100%;
  5.         border: none;
  6.       }
  7.       
  8.       body {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       
  13.       .wrapper {
  14.         display: block;
  15.         position: relative;
  16.         min-height: 100%;
  17.         height: auto !important;
  18.         height: 100%;
  19.         width: 100%;
  20.         min-width: 800px;
  21.         background: yellow;
  22.       }
  23. .container {
  24.         display: block;
  25.         height: 1%;
  26.         padding: 0 0 50px 0;
  27.       }
  28. .footer {
  29.         margin: -50px 0 0 0;
  30.         height: 50px;
  31.         background: #BFF08E;
  32.         position: relative;
  33.       }
* This source code was highlighted with Source Code Highlighter.

Глубоко копать не буду, так как думаю, что тут все предельно ясно. Можно обратить внимание на нижний padding у блока .container и минусовый верхний margin у блока .footer. Минусовым сдвигом мы подмимаем футер так, чтобы он помещался над контейнером. Паддинг у контентного блока влияет на то, чтобы контент не залазил под футер, а отодвигал его.
Также мы растягиваем тело документа, чтобы оно было со 100% высотой. Некоторые свойства — такие как бекграунд указал опционально.

Этап 2: Раздумия над следующими шагами


После этого этапа я обычно в блоке .wrapper создаю шапку страницы.
  1. .header {
  2.   position: relative;
  3.   width: 100%;
  4.   height: 50px;
  5.   background: cyan;
  6. }
* This source code was highlighted with Source Code Highlighter.

И тут подходит время сделать колонки одинаковой высоты. Мною вариантов было перепробовано очень много. Перебрав все мыслимые и немыслимые варианты я пришел к выводу, что чтобы колонки растягивались и занимали 100% от документа — логично использовать вариант, когда в создании колонки учавствуют 2 блока. Первый блок — спозиционирован абсолютно, имеет фиксированную ширину и высоту в 100%, а второй блок — позиционирован относительно и накладывается поверх абсолютно спозиционированного блока.
Значит надо добавить абсолютный бокс — в .wrapper и относительно спозиционированный в наш контейнер
Приведу пример из моей верстки:
  1. <div class="wrapper">
  2.   <div class="column-l">
  3.   </div>
  4.   <div class="column-r">
  5.   </div>
  6.   <div class="column-m">
  7.   </div>
  8.   <div class="header">
  9.     Шапка
  10.   </div>
  11.   <div class="container">
  12.     <div class="column-l">
  13.       Первая колонка
  14.     </div>
  15.     <div class="column-r">
  16.       Вторая колонка
  17.     </div>
  18.     <div class="content">
  19.       Контент
  20.     </div>
  21.     <div class="clear">
  22.     </div>
  23.   </div>
  24. </div>
  25. <div class="footer">
  26.   Прижимающийся футер
  27. </div>
* This source code was highlighted with Source Code Highlighter.

Чтобы не засорять дальше статью — приведу ссылку, по которой вы можете скачать данный файл.
На все вопросы, которые у вас возникнут — с удовольствмем отвечу в комментариях.

Заключение: Примеры в студию!


Привожу также несолько примеров макетов, собранных по данной системе:
В общем, комбинаций может быть столько, сколько вам угодно. Напомню или скажу тем кто не знает, что z-index срабатывает как для блоков, позиционируемых абсолютно, так и для position:relative;

Все указанные примеры вы можете скачать одним архивом (11 кб)

Надеюсь, я помог кому-то). Извините за некоторую сумбурность.
Спасибо за внимание.
Антон Патрикеев @dioteos
карма
31,5
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (134)

  • +3
    Ничего, что контент у вас находится в самом конце страницы? Если в колонках будет куча ссылок, куча текстовых абзацев, баннеров, счетчиков, то поисковик долго будет сквозь них продираться, пока дойдёт до основного текста. Да и пользователи скринридеров вам огромное спасибо врядли скажут.
    • +4
      Контент можно со спокойной душой перенести и в начало страницы. Абсолютные блоки (в последнем примере строки 2-7) неважно в каком порядке идут, их вынесем за блок .container
      Та же штука и с блоками стр.12-17 — их поставим после блока .content. На них стоит относительное позиционирование, а на .content нет.
      Но за вопрос все-равно спасибо. Учту обязательно и переделаю.
      • 0
        Выложите переделанные? в этот топик или в другой?
  • +1
    div.clear можно убрать за счет использования .container:after {}
    • +2
      И, как мне кажется, лучше избегать использование одного класса для разных блоков (я про .column-l и т.д.). Вынесите общие свойства (ширина, фон и т.д.) в отдельный класс, который будет и у абсолютного блока, и у относительного, а для них дополнительно свои классы со специфичными параметрами.
      • +1
        Спасибо. Использовал одинаковые классы для того, чтобы не писать в 2-х местах ширину контейнера, а только в одном. Насчет .container:after {} — не использовал для общей наглядности и простоты. Сделаю с ним.
    • 0
      Таким методом можно очищать поток? А можете пожалуйста ссылочку дать где можно поподробнее об этом почитать.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +4
      Извините, но надо еще чтобы футер был «липнущим», и колонки по 100% высоты.
      К тому же

      padding-bottom: 10010px;
      margin-bottom: -10000px;

      Мне не очень нравится
      • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Да. Я знаю. Вы думаете я так просто начал писать и пробовать эту штуку? Может, конечно, я и изобрел еще одного велосипеда, но от этого он, по крайней мере для меня, не менее удобный=)
      • НЛО прилетело и опубликовало эту надпись здесь
      • +5
        Не используйте его.

        Это абсолютно негодный способ. Я на нем обжегся, дело в том, что там используется враппер с overflow:hidden (чтобы спарятать padding). Так вот, разработчики браузеров, подгоняя их под тесты ACID, сделали так, что при переходе на якорь внутри дива с overflow:hidden прокручивается не страница, а содержимое дива! Слов моих нет, чтобы описать это безобразие. В результате, при переходе на якорь (типа /page.html#chapter5) имеем страницу, у которой видна только часть контента (начиная с якоря #chapter5), остальное скрыто.
        • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Семантика тоже важна. Header, расположенный после колонок, совсем не тру. Да и колонки на абсолюте…
    Не, это не вариант.

    На днях постараюсь выложить свою версию, которую допиливал 2 года. Может кто-нибудь возьмет на заметку.
    • –1
      Вылаживайте. Может коллективными усилиями соберем на хабре действительно полезную библиотеку. Интересно.
    • 0
      Мне интересно, жду!
    • НЛО прилетело и опубликовало эту надпись здесь
      • –2
        Говорю же, семантике противоречит. Первый элемент на странице должен находиться вверху кода.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Как ни крути, в данном примере, контент вообще непонятно где :)
            Ну, а по поводу шапки — а смысл что-то городить? При нормальной конструкции, она всегда будет вверху кода.
        • 0
          Взгляните, для примера, на верстку википедии.
          • 0
            Посоветуйте еще проверить валидацию гугла :)

            Я верстаю коммерческие сайты, там семантика важна. А Вики это не нужно.
            • +1
              Действительно, для вики семантика не важна. Именно поэтому они заморочились за семантику и за верстку так, что при отсутствии стилевых таблиц юзабельность их страниц не падает.
              • 0
                Ну тут все же речь о коммерческих проектах…
                • +3
                  Ну в коммерческих проектах ведь семантика соблюдается и для поисковых систем в том числе. Для этой же цели вики выдает основной контент в самом начале.
                  • 0
                    Вы предлагаете собрать шаблон, в котором шапка будет находиться под контентом?
                    • +3
                      Вообще я предлагал взглянуть на верстку вики, где так и сделано. И обратить внимание на причины «почему». Вот и все не более того.
    • 0
      Очень интересно! Жду!
  • +3
    именно такое прижимание футера использую во всех проектах, имхо самый простой, стабильный и понятный способ.
    • +1
      он то самый простой, но высота фиксированная, а это не всегда хорошо (
      • +1
        Минимальная высота фиксирована. Максимальная — в зависимости от контента. Посмотрите первые 4 ссылки в конце статьи
        • 0
          я имел ввиду — высота футера фиксирована, точнее она не задана явно, но ее таковой делает margin-top
          • 0
            за несколько лет разработки никогда не было необходимости сделать футер не фиксированный по высоте.
            • НЛО прилетело и опубликовало эту надпись здесь
              • –1
                это фиксированные разделы.
                они годами могут не меняться
                • 0
                  могут и не меняться, но если будет resizable fonts — как будет выглядеть футер?
                  • +2
                    Сделать в em высоту футера и room под него, в чем проблема — но вопрос риторический
                    • 0
                      что-то мы не понимаем друг друга — какую задавать высоту футера в em, если в футере может быть 5, а может быть и 25 ссылок + resizable fonts? поэтому этот способ приемлем, но далеко не всегда.
                      • –1
                        все браузеры уже нормальны ресайзят все масштабно.
                        если контент автоматом генерится в футере — тады да, но я такого не встречал даже :)
                        • +1
                          а вот и не все ))))
                          • –2
                            и че? ради одного недобраузера все изворачивать наизнанку?
                            я вот не понимаю вас вообще. каждый второй топик орется — «Фтопку ИЕ6!!!!111», но при этом эти же люди тут же пытаются тыкать носом — «а как же ИЕ6?!!11»
                            тошно
                            • 0
                              если у нас разговор зашел в такое русло, то:
                              1) я никому не тыкал, не желаете поддерживать ИЕ6 — и не нужно
                              2) если вы хотите получить деньги за свою работу и клиент хочет поддержку ИЕ6+, то придется делать.
                              • +2
                                одно дело поддержка ie6, другое масштабируемость в ie6
                      • +1
                        Сферический footer в вакууме, мы тут обсуждаем вполне стандартные вещи, вашу задачу стандартной назвать язык не поворачивается :)

                        А ресайз, как уже заметили, давным-давно не шрифтами делается во всех браузерах
                        • 0
                          отвечу еще раз — не все. Некоторые клиенты все еще хотят, чтобы их сайт выглядел так же в «любимом» браузере как и во всех остальных.
                        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      У меня тоже, практически, такой же. Но за ненадобностью убрал z-index. Так и не понял, зачем он.

      Вот мой код:

      #footer {height:100px; margin-top:-100px; position:relative; width:100%;}

      + у врапера padding-bottom равный высоту футера+отступ.
      • +1
        z-index для того, чтобы футер перекрывал абсолютные блоки. Так как у абсолютов высота в 100% — они иногда «залезают» на футер
        • +1
          Вывод: Не использовать абсолютное позиционирование для каркаса сайта.
          • +1
            =) Было бы все так просто…
            • +1
              У меня получается :)
  • +1
    за новый вариант реализации — "+", но несколько смущает наличие пустых блоков, таких как — .column-l и .column-l, если макет фиксированной ширины, то можно все эти бг перенести, например, на .wrapper, еще как вариант реализация с пом. padding-bottom:9999px; margin-bottom:-9999px;
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    min-width: 800px; не работает во всеми нами любимом браузере :)
    • +1
      Не захотел портить код. Вариантов много — от:
      * html .wrapper, * html .footer {
      filter: expression(runtimeStyle.width = (documentElement.clientWidth||document.body.clientWidth)<800?'800px':'');
      }

      или

      * html .wrapper, * html .footer {
      width: expression((documentElement.clientWidth||document.body.clientWidth) < 800? "800px" : "auto");
      }

      И до растягивающих блоков, которые не дают схлопываться контейнерам.
      Посмотрите http://cssing.org.ua/2005/09/02/min-width-for-ie/
      Там более подробно описано.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          А что именно вас удивило, если не секрет?)
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              хаки для осла нужны всегда — закон жизни (-:
  • 0
    В жизни приведенные примеры с колонками с заданным одним цветом бекграунда встречаются очень редко, зачастую используется еще и фоновый рисунок. А если так, то почему бы не создавать тот самый «эффект колонок»?
    • +1
      В некоторых случаях и он оправдан. Но представьте, что на колонке у вас должен быть горизонтальный градиент. При изменении ширины колонки — надо будет менять изображение фона.
      С «эффектом колонок» будет посложнее получить нужный результат.
      Но от прложенного вами варианта не отказываюсь — так как сам его иногда использую.
      • +4
        Да, и для html, body
          min-height: 100% !important;
          min-height: auto;
        
        лишнее.
        • +1
          С этим соглашусь. У меня от этих экспериментов немного паранойя началась. Перестраховался. Спасибо.
    • +1
      И после каждой правки колонок перерисовывать картинку?
  • 0
    Хорошо. Несколько замечаний.
    Футер неплохо было бы во враппер вынести.
    Хорошо, когда колонка и её подложка находятся вместе, т.к. всё это хозяйство может генерироваться админкой, например, и так было бы удобнее.
    • +2
      Футер не во враппере именно для прижимания книзу — код то смотрели? вообще зачем это?
      а если все таки внести — надо будет еще миллион костылей чтобы его вниз прижать
      • 0
        а чего ж не смотрел-то? если, например, мне нужен враппер для того, чтобы скорректировать ширину макета и отцентрировать, то в вашем случае мне придётся всё то же самое делать и для футера.
        • 0
          ну давайте, запихните, и посмотрим как будете прижимать.
          я хз мне не лень width:999px в двух местах поставить.
          зато все будет совершенно четко и стабильно работать
          • 0
            а что мешает, напрмер, сделать враппер релятивным, а потом абсолютизировать понизу футер? Ведь как был враппер 100% по высоте, так и останется!
            • +1
              неприязнь к абсолютам, примененным к основному лэйауту, но это уже лично мое
              • 0
                Ну личное, так личное))
                А вы не в курсе, это имеет значение с точки зрения производительности и т.п.? (релятивность)
            • +1
              Такой способ тоже существует и вполне заслуживает право на жизнь. Я привык к вышеуказанному способу как к самому проверенному и надежному.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                А можно поподробней? У меня вроде никогда не было проблем с этим в IE6
                • НЛО прилетело и опубликовало эту надпись здесь
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      хм…
                      1. враппер получит hasLayout в моём варианте, т.к. релятивен
                      2. я достаточно проверяю в ie!
                      3. специально прибил футер на сайте, которым сейчас занимаюсь, вниз по моему способу и убедился, что в шестом IE всё в порядке
                      • НЛО прилетело и опубликовало эту надпись здесь
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Ну, принцип, по которому я верстаю, позволяет мне использовать только «железные» конструкции, поэтому таких сюрпризов минимум.
                          Всем, кстати, советую)))
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          хм, не знал
        • +1
          А что в этом плохого?
          .wrapper, .footer{
          width:800px;
          margin-left:auto;
          margin-right:auto;
          }

          Костыль для ие
          * html body{
          text-align:center; /* Только не забудьте его потом переопределить */
          }
          • 0
            Да в общем, ничего, я не утверждал, что это плохо (максимум, expression два раза отработает), а просто подумал, как бы я это сделал.
          • 0
            .wrapper, .footer{
            width:800px;
            margin-left:auto;
            margin-right:auto;
            }

            .wrapper, .footer{
            width:800px;
            margin:0 auto;
            }

            не обращайте внимания=)
            • +1
              margin:0 auto; можно указать только для .wrapper.
              Для футера это будет
              margin:-60px auto 0 auto;
              Потому я и выбрал такую запись для наглядности
  • 0
    Идея неплоха, но, как обычно, нюансы выявляются при «натягивании» конкретного дизайна и контента.

    Расцветка макета как в advice dog — психотропно
    • 0
      Согласен. Способ еще не обкатан. Со временем постараюсь выкинуть все лишнее и довести до универсальности. За рачцветку простите) Я больше над позиционированием думал)
  • –1
    +карма
  • 0
    В опере 9.64/10.10 второй вариант некорректно работает: первая колонка тянет страницу по высоте, а вторая колонка доходит только конца первого экрана :(
  • 0
    Извините автор… но ваш вариант не всегда подойдет… а если честно… то в крайне редких случаях =(
    • +1
      Пожалуйста, аргументируйте. До сих пор я и сам обходился без него прекрасно. Попробую применить в разработке среднего звена проекта.
  • 0
    зачем для div указывать display: block?
    • +1
      У меня почему-то иногда возникали проблеммы с ие5.5 и 6. Потому и поставил. Финальную версию буду оттачивать
  • 0
    А правая колонка должна стоять справа?
    А то у меня вот так это выглядит
    screenshot2.png - image uploaded to Picamatic

    Хром 4.0.229.1
    OpenSuse 11.1
    • +1
      Я пока-что не делал примера с расбросом колонок. Они по одну сторону у меня. Назвал просто так. Надо было первая/вторая назвать. Сделать, чтобы разносилось по разным углам также не предоставляет сложностей. А ссылка. которую вы привели почему-то недоступна
  • 0
    Да, каждый верстальщик должен сверстать свой Holy Grail… Я похожий макет «придумал» вот тут.

    По теме отпишусь позже.
  • +2
    для .footer необходимо отдельно прописать min-width, т.к. он вынесен за .wrapper
    • 0
      Да. Вы правы. Недоглядел малость. Причесывать еще буду код и причесывать)
    • +1
      А по-хорошему указать min-width для корневого элемента, т.е. body.
  • 0
    без обид, но сразу видно, что фонарь. то что решение рабочее и может многим подойти и будет кроссбраузерное — это не вопрос. но когда идут три колонки, а потом хедер, то сразу становится ясно, что человек не знает, что такое семантика — то к чему сейчас стремится верстка и то к чему ведет нас хтмл5. поменяй вы хедеры и колонки местами и загляни я в просмотр хтмл страницы вашего сайта, я бы сказал, да этот человек что-то понимает, а так… и позишн абсолют. работайте.
    • +1
      Какие могут быть обиды)
      Посмотрите, пожалуйста комент
      В следующей версии контент будет идти сразу за хедером. Это не представляет особой проблемы. А насчет абсолютного позиционирования — я привел технический метод реализации проблемы.
  • 0
    Не что подобное верстал позавчера, как тест для работодателя.
    Валидно и кросбраузерно, но до уровня использования не допилил.
    docs.google.com/leaf?id=0B36qsyGVYobGZGM3N2JkZDYtOTU1Ny00MjMzLWJhMzYtZmQ1MzRjMzRlYmVj&hl=ru
    • 0
      • 0
        По условиям задания, использовать можно только CSS. HTML изменять нельзя.
    • +2
      Ваш вариант еще немного сыроват. Попробуйте добавить много контента — увидиье. Футер остается на месте, а контент улезает под него. Это ФФ3.5.
      • 0
        *увидите
      • 0
        Я это и имел ввиду под «до уровня использования не допилил».
  • 0
    >ie5.5
    Зачем?
    • +1
      Просто стало интересно. Никогда о нем не задумывался. В общем — остался даже довольным. Как по мне — намного меньше багов, чем в ие6. Хотя это чисто субъективное мнение.
      • +2
        MS не везет с цифрой 6.
        IE 6 — самый глючный, Windows 6 (Vista) — такая же.
        • 0
          WinMobile 6 в продолжение темы)
          • 0
            У меня 6.1 — видимо, единичка помогает — не глючный %)
  • –2
    Код ужасный. На уровне free-lance ru. Смотреть страшно, а уж применить…

    1) Почему у .container height = 1%? Вы сдурели там что ли? Это хак для IE 5.0? Или у вас контент составляет 1% от высоты страницы?
    2) Почему все свалено в кучу, нормальные css-стили и хаки для хромоногих браузеров?
    3) Почему нет min-width на HTML? Без него при уменьшении ширины окна интересные эффекты с фоном страницы. Почему нет max-width на wrapper?
    4) для Html/Body/Wrapper стоит убрать margin colapsing (чтобы верхний маргин контента не вываливался наружу)
    5) Зачем вы для .container пишете display:block? Скажите мне, скажите, в каком браузере div по умолчанию отображается не блоком???
    6) Зачем в футере position: relative?
    7) Эта проблема становится сегодня менее актуальной, но у вас все размеры блоков заданы в пикселах! при увеличении шрифта они не будут растягиваться, и он будет из них вываливаться. Я. например, для футера пишу по этой причине не height, а min-height — пусть футер уйдет за границу экрана, но текст из него не вываливается.

    В общем стили абсолютно кривые. Вам определенно стоит почитать описание CSS на сайте w3c, тематические блоги, и т.д, а не выкладывать это на главную. Я *категорически* не советую брать этот код кому-то за основу.

    > Глубоко копать не буду, так как думаю, что тут все предельно ясно.

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

    Для прилипающего футера достаточно height: 100% на html & body, и min-height: 100% на wrapper (+ padding). И все. Плюс, возможно, пара хаков для IE6 (он понимает height и width как min-height и min-width для блоков с hasLayout? который включается через zoom:1). Я советую всем выносить хаки для IE6/7 в отдельный подключаемый через conditional comments файл, все равно скоро эти убогие браузеры вымрут, нечего портить ради них основной файл стилей.

    Ну а по поводу колонок — мне нравятся идеи с флоатами (смотрите на chikuyonok.ru ). Флоаты, хоть и старая технология, но проверенная временем. кроссбраузерная и влияет на поток, в отличие от абсолютного позиционирования.

    Ну и еще добавлю, какие требования я люблю предъявлять к своей верстке (хоть и не всегда получается их выполнить, но это полезно в плане образования и развития):

    1) Валидность, предпочитаю HTML 4.01 Strict (да и у убогого браузера с ним проблем меньше)
    2) Поддержка ИЕ6, правда сейчас вместо написания всяких тяжелых expressions, behavoiurs и прочих яваскриптов предпочитаю просто упрощать вид страницы: вместо круглых уголков — квадратные, вместо png24 — png8, но зато все читаемо и не тормозит
    3) Читабельный вид страницы без стилей: для этого приходится переставлять блоки в исходнике, чтобы сначала шел контент, а потом дополнительные блоки, хедер, меню, и футер.

    С этим пунктом серьезная сложность: сколько оставить места перед контентом, если мы не знаем сколько займет хедер и меню (с учетом изменения размера шрифта?).

    4) Читабельность страницы без рисунков: значит. всюду, должны быть прописаны правильные фоновые цвета, а блоки со скругленными уголкаим превращаются в блоки с квадратными уголками (о да, это было нелегко сделать :) )
    5) Ну и максимум доступности при работе без яваскрипта — потому что люблю пользвоаться браузером без яваскрипта.
    6) Вот минимум лишних блоков целью не ставлю, ибо перечисленное выше имхо важнее. Лучше всюду вставлять пустые ins, чем смотреть, как IE не поддерживает :after и :before :(
    • 0
      Для начала приведите свои разработки в студию.
      Что-то много написано, да ничего хорошего. Вы спец? Докажите. Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных. Если ничего по сути не можете сказать, а просто хотите показаться великим — дело ваше. Ветку с вами развивать не намерен.
      Кстати, в институте вас должны учить и культуре. Сходите. Послушайте.
      • +1
        > Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных.

        Мы в этом топике не обсуждаем чьи-то проекты, а приведенный вами код. Только его. Я понятия не имею, сколько вы сделали проектов, но в любом случае количеством меряться глупо — «фабрику сайтов» вы все равно не обгоните.

        Вы, например, сможете объяснить смысл каждой строчки в первом примере? Если нет, зачем вы этот код тут публикуете? По вашему, CSS пишется исключительно методом подбора, пока не заработает? Какой смысл по 3 раза переопределять height? Вот упомянутый ранее Сергей Чикуенок с своем блоге, например, объясняет почему он пишет так, а не иначе.

        Здесь же много начинающих верстальщиков, стоит ли их изначально учить такому подходу?

        И насчет культуры — ну извините конечно, если вас задел мой комментарий, но он весь про код, я не перехожу на личности :) И если мне кажется, что что-то криво или неправильно, я так и пишу. И я по-прежнему думаю, что абсолютное позиционирование там для колонок — изврат. Я сам с ним возился и мне не понравилось, что получилось в итоге.
      • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        > Хак для IE6. По-хорошему, конечно, должен идти в паре с height: auto !important или в CC.

        hasLayout включить что ли? Мне как-то больше zoom нравится, сразу видно, что хак :)

        Ну и «должен идти в паре с heigt:auto» — а разве не лучше кинуть все эти мерзкие хаки в отдельный файл (ну или в конец общего файла, если вам неохота загружать 2 файла), чтобы основной код хотя бы нормально читался? Невозможно же воспринимать код. в котором height 3 раза указана, и всюду разная!

        >> интересные эффекты с фоном страницы
        > Лучше всего лечатся раздельным указанием фонов для html и body (имхо).

        Я имею в виду, что фон сайта часто задается на элементе html или body, и если задать min-width для wrapper (а не для html), при узком окне html станет по ширине уже wrapper и справа просто белый фон :) Кстати, похожая проблема есть даже на сайте artlebedev — при увеличении шрифта внутренняя часть страницы становится шире body и страница вываливается вправо, а хедер и футер остаются узкими.

        > Графические дизайнерские плюшки, в которые эти блоки чаще всего приходится вписывать — как правило, тоже :). А юзеры IE6, FF2 и Chr1 сами не ищут легких путей.

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

        Но все же лучше (где можно) пользоваться по возможности em'ми, так как например в Линуксе нет некоторых шрифтов, они заменяются на другие, с другой высотой или шириной, и попиксельная верстка может поплыть там :) Именно из-за таких проблем, и не удается нормально сделать хедер в конце HTML-кода, а потом с помощью А.П. перекинуть его вверх :(

        А еще есть ИЕ7, у которого какой-то свой алгоритм зума (в котором ломается даже сайт microsoft, ололо, так что я даже не интересовался как он работает и не проверяю сайты в нем, вроде он что-то нехорошее делает с маргинами при зуме).
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            > но иногда требования включают абсурдное на мой взгляд условие «валидный CSS2.1», и приходится изгаляться…

            Ну вот, я ж говорю, проще все мерзкие хаки в файлик ie.css засунуть, и не придется потом писать height по 3 раза :)

            А по поводу em'ов — это еще что, я вот экспериментировал с image text replacement, когда поверх текста кладется картинка, с каким-нибудь нестандартным шрифтом, как размеры такой картинки рассчитывать с учетом возможности изменения размера шрифта, и с учетом линуксоидов — непонятно :( Плюс, карти нка должна быть непрозрачной (чтобы исходный текст не проглядывал), так что размеры с запасом не возьмешь. Придется ждать всеобщего распространения векторной графики, ибо пиксельная в данном случае имеет свои ограничения.
    • –1
      Простите но Вы что хотели большим количеством текста хотели прикрыть свою некомпетентность в области верстки?
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Функционально решение практически ничем не отличается от фоновой картинки, бывало я как то сам из-за лени тянул абсолютно с позиционированные блоки слоями ниже. Этот способ не решает поставленной цели, представьте, что у вас одна колонка поделена на 3 части разных цветов и все 3 части равномерно тянутся по высоте. При этом каждая часть наполнена контентом. В таком случае у вас не получится тянуть абсолютно с позиционированный блок синхронно с контентом. Если не понятно могу нарисовать)
  • 0
    Мне непонятен вот этот момент:

    html, body {
            min-height: 100% !important;
            min-height: auto;
            height: 100%;
            border: none;
          }

    Я бы тут ограничился просто height: 100%; (и, на сколько мне известно, всё при этом работает). Зачем задавать min-height, а затем ещё и переопределять его?
  • 0
    У меня (ff3.5.2, 1280х800) во всех примерах если сделать окно браузера шириной 50%, к примеру, и скролить вправо — футер не дотягивается до правой границы страницы. Так и должно быть?
  • 0
    Если попытаться из этого сделать фиксированный макет, поставив wrapperу
       margin: 0 auto;
    то ie 6 не будет центрировать div (из-за <?xml version=«1.0» encoding=«UTF-8»?> в начале страницы).
    Если же убрать этот <?xml version=«1.0» encoding=«UTF-8»?>, то тот же 6-й ие перестает растягивать колонки. Есть ли выход?
  • 0
    Единственное решение, которое всегда спасало, это использование overflow: hidden и float для левого/правого блока и контента, абсолютное позиционирование футера и паддингом контейнера, min-height: 100% для #main и height: 100% для html. Гм… вроде все. Работает 100% с любыми вариантами. Респект верстальщику, что показал мне этот способ.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.