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

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

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

В общем никаких компромиссов. Контент, информационная составляющая любой web-страницы, впереди планеты всей.

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

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

  <div id="middle">
    <div class="wrap">… </div>
  </div>
  <div id="footer">… </div>
  <div class="header">
    <div id="header">… </div>
  </div>

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

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

Стили описывающие поведение нашей разметки:

* {margin:0;padding:0;}
html,body {height:100%;}
body {background-color:#eee;position:relative;}
#middle,#header,#footer {margin:0 auto;width:930px;}
*html #middle {overflow:visible;height:100%;}
*html .wrap {zoom:1;}
#middle {
  background-color:#fff;
  border:#000 solid;
  border-width:0 1px;
  margin-top:-41px; /* height footer */
  min-height:100%;
}
.wrap {margin-top:151px;} /* height #header+#footer */
.header {position:absolute;top:0;left:0;width:100%;}
#header {
  background-color:#aaf;
  border:#000 1px solid;
  height:110px;
}
#footer {
  background-color:#eef;
  border:#000 1px solid;
}

Скриншот.

Опаньки, а что с OPERA? А почему собственно появился не запланированный отступ сверху и вертикальная прокрутка? Причем, это происходит в OPERA9.xx, FF2(3), IE8 beta2. Зато IE6 просто молодец.

Вопрос, даже не в том, кто прав, а что делать? Остановитесь, подумайте. Ответили? Нет, тогда читаем дальше.

Ответ на вопрос содержится в заголовке поста, да именно, указание стилевого правила:

body {position:relative;}

вводит в заблуждение крутые и продвинутые браузеры. А вот всенародно "любимый" IE6 на высоте.

Удаляем.

Скриншот.

Что-то опять не так. Вертикальная прокрутка и поверьте на слово, примеры само собой будут приведены, другие неприятности.

Поведение перечисленных выше браузеров аналогично.

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

Догадались? Если нет, то еще раз внимательно читаем заголовок поста.

Необходимо в стили добавить:

#middle,#header,#footer {overflow:hidden;}

Очередной скриншот.

Спасло ли это действо, положение? Нет вертикальной прокрутки уже плюс.

А если вернуть:

body {position:relative;}

Во как, часть header-а улетела вверх.

Отыграем назад.

Визуальные разночтения заметны.

Если поменять

.wrap {margin-top:151px;}

на

.wrap {padding-top:151px;} 

Картина поменяется на обратную:

Кто виноват, не известно, но вот что делать в данной ситуации?

Ответ ищем в заголовке.

Сместим акцент :

.wrap {border-top:151px solid;}

Вот теперь, полный фен-шуй.

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

Переходим на страницу с примерами

P.S. Именно по этой методике прибивается footer к нижней границе окна браузера в одной из последующей частей цикла "Техника Gordi"

Новый год не за горами.

Время итогов и планов на будущее.

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

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

Частично многое из того, что будет изложено, повторяет мысли озвученные в цикле "Иллюзия идеала" и берет с него свое начало. Также цель данной публикации - более полно сформулировать принципы, которыми стоит, на мой взгляд, руководствоваться при верстке глобальной разметки.

Не уверен, что мне удастся полностью раскрыть суть предлагаемой вам концепции.

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

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

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

Перейдем от слов к делу.

Скриншот.

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

Главная фишка, соль концепции в двух словах заключается в том, что шапка, центральная часть и подвал описываются одним и тем же html-кодом и стилями. А основой слоев как-то - #header, #middle, #footer является тот самый пресловутый контейнер #middle с начинкой, которому в последнее время на страницах блога было уделено так много внимания.

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

Поведение макета, в каком-то смысле, напоминает обычную таблицу, но в отличие от нее обладает большим потенциалом.

Области, обозначенные на скриншоте белым цветом с условными названиями – "Header Center", "Middle Content" и "Footer Center" резиновые, с настраиваемыми параметрами min/max-width, для IE6 используется эмуляция через width:expression.

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

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

Не которые варианты контейнера #middle были представлены ранее. Любому из них присущи, как достоинства, так и недостатки, но у вас есть выбор и под каждую конкретную ситуацию можно найти максимально подходящее и устраивающее вас решение.

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

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

Голая Правда божилась, 
клялась и рыдала,
Долго болела, скиталась, 
нуждалась в деньгах.
Грязная Ложь чистокровную 
лошадь украла
И ускакала на длинных 
и тонких ногах.
"Притча о правде"
В.Высоцкий

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

Что в принципе может поменяться, если для одного из избранных, мы используем "гламурную" обертку и панацея ли это на самом деле?

Встав в известную позу страуса, кого мы обманываем? Валидатор стилей W3C?

Не уже ли желание любой ценой пройти валидацию таблицы стилей и поставить баннер на страницу, преобладает над здравым смыслом?

Вот давайте и поговорим про "Голую Правду" и "Грязную Ложь" связанную с применением условных комментариев.

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

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

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

Любой серьезный проект потребует этого от вас, и никуда вы не денетесь, таков реальный и суровый мир web-а.

Как результат, валидность таблицы стилей, накрывается медным тазом. Нет для других браузеров подобной фишки, вроде "своих" условных комментариев.

Постулат номер два.

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

Посмотрим.

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

<link type="text/css" href="style.css rel="stylesheet">
<!--[if IE 6]>
  <link type="text/css" href="ie6.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
  <link type="text/css" href="ie7.css" rel="stylesheet">
<![endif]-->
<!--[if IE 8]>
  <link type="text/css" href="ie8.css" rel="stylesheet">
<![endif]-->

Вас ничто не смущает?

Кто-то можете сказать, это же очень удобно. Умрет IE6, убили его файл, ничего лишнего, но стоит ли себя обманывать? Если это и случится, то точно не в этой жизни.

О чем еще стыдливо умалчивают апологеты условных комментариев?

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

И самое главное, с чем приходится сталкиваться чуть ли не ежедневно.

Стоит у меня несколько версий FireFox, использую, как основной браузер, не без изъянов конечно, но всяко-разно лучше, чем OPERA или IE.

И надо мне по чьей либо просьбе поправить страницу в одном из IE, а чтобы получить о ней полное представление, приходится скачивать ее всеми версиями от Microsoft, так как FF файлы, заключенные в условные комментарии игнорирует. Согласитесь, это же, ни в какие ворота не лезет.

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

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

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

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

Итак, выбор за вами.

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

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

<style type="text/css">@import url(style.css);</style>

Думаю пользователь, сохранивший вашу страницу на HDD, выскажет в ваш адрес много, много "ласковых" слов, в виде не нормативной лексики.