Мираж, иллюзия - все бред, 
 Но каждый раз - опять и снова,
 Изобретать велосипед,
 Мне надоело, честно слово…
Gordi

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

Поверьте, никоим образом не заставляю вас построить, скажем, "Дом-2", и уж никак на роль отца-командира не гожусь, есть более подходящие для этих целей персонажи, как в том же реалити-шоу. С таким блеском виртуозно строить и разводить малочисленное без башенное воинство, да и как не печально многочисленную телеаудиторию, тоже уметь надо. Отдадим должное сценаристам создавшим "убойный" сюжет. С креативом у них все в порядке, жаль что он принимает столь убогие, уродливые формы.

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

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

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

После, как всегда, "краткого" вступления, приступим к последовательному и детальному изложению озвученного в предыдущей статье.

Первым делом, необходимо заставить наши слои, которые могут иметь любую ширину и обладая max-width находиться строго по центру с равными отступами от вертикальных границ окна браузера или же занимать все доступное место в том же самом окне. Наличие min-width, предусмотрено в обоих случаях.

В каком-то смысле, довольно простая и вполне тривиальная задача. Но все осложняется переносом блока header ниже контейнера middle по html-коду. Краткое описание, как это сделать вы найдете в первой части цикла.

Остановимся на этой части, "иллюзии идеала", более подробно.

Используемый прием, почему-то очень редко встречается на практике. Хотелось бы сказать: "это придумал я", тем более что в таком контексте, лично мне, он не встречался, но наверняка найдется некто, кто заявит, нет дорогой товарищ, ошибочка вышла – вот здесь и гораздо раньше, все это было, плохо искали и т.д. и т.п.

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

"Знания, помноженные на труд в купе с постоянной практикой и туже изобретательность…", с полным основанием можно занести одним из пунктов в манифест верстальщика. Прямая аналогия и вполне уместная.

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

Повторим общий html-код нашей страницы:

  <div id=”middle”>CONTENT</div>
  <div class=”header”>
    <div id=”header”>HEADER</div>
  </div>
  <div id=”footer”>FOOTER</div>

Теперь наступило время стилей и пояснений к ним.

css

* {margin:0;padding:0}
body {background-color:#eee;padding-top:130px;min-width:720px;max-width:900px;}
body,#header,#middle,#footer {position:relative;margin:0 auto;}
.header,#header,#middle,#footer {overflow:hidden;}
.header {position:absolute;top:3px;left:0;width:100%;height:130px;}
#header {background-color:#eee;border:#000 1px solid;height:125px;}
#middle {background-color:#fff;border:#000 1px solid;border-top:0;}
#footer {background-color:#ccc;border:#000 1px solid;border-top:0;height:40px;}

*html body {width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );}
*html #middle,*html #header,*html #footer {width:expression( documentElement.clientWidth > 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth >900 ? "900" : "auto") : "900px") : "auto" );}
*html #middle {overflow:visible;height:1%;}

Итак, все предельно просто.

Правила перечисленные в строках:

body {min-width:720px;max-width:900px;}
body,#header,#middle,#footer {margin:0 auto;}

центрирует указанные блоки с зданием максимальной и минимальной ширины. Это для тех браузеров, которые понимают.

Для IE6 все решается указанием ширины через width:expression к body - min-width и контейнерам #middle,#header,#footer - max-width, что стоят под звездным хаком.

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

Остальные стилевые правила в пояснениях, на мой взгляд, не нуждаются. Там, где проставлены размеры и цвет, вы можете менять все по своему усмотрению. Не забывая о разнице высот блоков .header,#header. Ну и .header {width:100%;} обязательный параметр. Пример.

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

Пример был бы не полным, если бы наша разметка не занимала всю доступную высоту окна браузера при минимуме информации. Тут тоже нет никаких сложностей. Добавив несколько строк в таблицу стилей можно легко получить желаемое:

html,body {height:100%;}
#middle {min-height:100%;height:auto! important;height:100%;}

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

Поэтому в заключительном варианте, фишки "footer который всегда внизу" не будет.

Свое отношение по этому поводу не однократно высказывал, повторяться нет смысла, добавлю лишь, один рекламный небоскреб размерами 160*600 в боковых колонках, решает эту проблему на ура. А если там еще и меню? В общем, не забивайте себе голову подобными глупостями, оно того не стоит.

Понятное дело, что подобный вариант в наличии имеется, но только для личных нужд в основном для тестирования, в реальных проектах он мной не используется.

Просьбы оказать помощь в создании данной фишки, применительно к тому или иному ресурсу, или выложить на всеобщее обозрение существующий вариант, останутся без ответа.

Собственно на этом можно было бы и закончить. Но впереди разговор о не менее интересном блоке middle.

Продолжение следует.

Сериал, так сериал :)

 Далек, как прежде идеал,
 Богатый выбор – те же грабли,
 А, что в конце узнаешь вряд ли,
 На эшафот иль пьедестал...
Gordi

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

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

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

В общем случае глобальная разметка страницы состоит из трех слоев и имеет приблизительно такой вид:

  <div id=”header”>HEADER</div>
  <div id=”middle”>CONTENT</div>
  <div id=”footer”>FOOTER</div>

Классика жанра.

И все-таки желание при отключенных стилях получить расположение области контента выше, чем header и footer вполне обоснованно и уместно.

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

Перенос блока header ниже контейнера middle по html-коду, может оказаться полезным и в ряде других случаев.

В качестве анонса.

Статья об интеграции горизонтального меню с вложениями в скрипты Мастера Lasto, остается в планах автора. Есть определенная последовательность в написании постов. Одно вытекает из другого. Статья о центрировании горизонтального меню уже была, теперь данное меню расположенное в header опускаем ниже области контента.

Принципиально исключено применение прокладок типа:

<div class=”clear”></div>

Или аналогичным им, что часто является следствием использования в разметке страницы техники float:left(right).

Исходя из выше сказанного, наш html-код будет выглядеть так:

  <div id=”middle”>CONTENT</div>
  <div class=”header”>
    <div id=”header”>HEADER</div>
  </div>
  <div id=”footer”>FOOTER</div>

Сотворить нечто подобное не составляет никаких проблем.

К сожалению, полноценное использование абсолютного позиционирования, потребует внесения блока footer в контейнер middle, а там есть свои нюансы. Поэтому воспользуемся редко применяемым приемом, как-то - задаем необходимое значение padding-top для body.

Далее, класс header абсолютно позиционируем с нулевыми значениями top и left, задав соответствующую высоту равную или чуть меньше ранее указанного значения padding-top для body.

Естественно, для body в стилях должно присутствовать правило position:relative;

Никаких других контейнеров не предусмотренно. Все будет находиться строго по центру окна браузера. С регурируемой максимальной и минимальной шириной всех блоков. Приблизительно так.

Перейдем к блоку middle:

<div id="middle">
  <div class="main">
    <div class="wrap">
      <div class="content">Center Content</div>
      <div class="left">Center Left</div>
    </div>
    <div class="right">Center Right</div>
  </div>
 </div>

Область контента, как и положено, идет раньше боковых колонок с навигацией и рекламными блоками. Проповедуем все тоже принцип - контент впереди при любых обстоятельствах.

Возможно, кому-то html-код покажется избыточным, но в стремлении приблизиться к идеалу, а в это понятие включаю в первую очередь минимум html и css, гибкую, простую настройку всех трех колонок по ширине, центральная колонка должна обладать регулируемым параметром min/max-width, легкое исключение одной из них с объединением ее с областью контента или без, одинаковая высота колонок равная по высоте самой высокой.

Сплошная тавтология… :)

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

Думаю, нигде больше информации по этому вопросу в таком объеме и в одном месте с обширной базой примеров, вы не найдете.

Структурно блоки header и footer, ничем от выше приведенной секции не отличаются.

И тому есть довольно простое объяснение.

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

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

Стили сгруппированы таким образом, что у каждого слоя все параметры регулируются, не зависимо друг от друга.

   Уходит молодость моя, 
   Через июньские поля,
   А в небе столько глубины,
   Что звезды дальние видны.
   И среди них осколком льда...
"Уходит молодость моя"
Ю.Антонов

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

К счастью, жизнь не стоит на месте, что в не всякого сомнения радует.

Со дня публикации предыдущего поста, а времени прошло, замечу совсем чуть-чуть, в личной переписке накопилось заметное количество вопросов.

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

Вот основные проблемные позиции:

1. убить вертикальную прокрутку при минимуме контента и информации в колонках навигации (до сих пор не пойму, зачем это надо, не уже ли не хватает слов на великом и могучем?)
2. трудности в реализации двух колоночной разметки

Начнем по порядку.

Убиение вертикальной прокрутки.

Проблема вертикальной прокрутки заключается в том, что footer вынесен из общего контейнера и имеет фиксированную высоту. А его размещение в нем ведет к другим трудно разрешимым последствиям. Причем, существенную роль для IE6 играет и тот факт, что заданная высота по дефолту для блока #center принимается им за чистую монету.

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

Для решения воспользуемся известным приемом, который очень часто является действенным в отношении ширины. Суть его в следующем – задаем border-top необходимой ширины/высоты для #header и с помощью отрицательного margin-top для #wrap, подбирая данные значения, в общем случае они равны друг другу, но могут незначительно различаться, добиваемся исчезновения вертикальной прокрутки, контролируя процесс в IE7, FF, OPERA.

Для IE6, кроме выше сказанного, нужно указать свою высоту для #center в процентном выражении. Будет меньше чем 100%.

Отказываемся от указания фиксированной высоты для #footer, обходимся вертикальным padding-ом.

Естественно, в зависимости от наполнения нашего footer-а, при минимуме информации в колонках все, что описано чуть выше придется корректировать в плюс или в минус.

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

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

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

Двух колоночная разметка.

Идем и смотрим. Три варианта разметки с учтенным ответом по поводу вертикальной прокрутки.