11 декабря 2009, 17:13

html/css изыски...

  Попался въедливый клиент,
  ТЗ нарисовал в момент,
  Всё заливал, мол, Горди – бренд!?

  Приятно слушать этот бред:
  "Начало всех начал – CONTENT!!!"

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

Где-то, что-то с помощью оного пристроить, подтянуть это да, а вот по настоящему, как-то не приходилось встречать.

Одна из моих попыток, пусть там и рассматривался частный случай, была опубликована в "position:relative;overflow:hidden;border-top; Браузеры"

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

ТЗ будет простым и не замысловатым, состоящим всего из двух пунктов:

Сто процентная высота страницы
Header и горизонтальное меню (может быть с вложениями) по html-коду, сброшено ниже области контента

<body>
  <div id="middle">
    <div class="content">Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div id="footer">Footer</div>
  <div id="header">Header</div>
  <div id="menu">Горизонтальное меню</div>
</body>

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

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

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

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

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

Таблица стилей:

* {margin:0;padding:0;}
html,body {height:100%;}
body {margin:0 auto;position:relative;width:990px;}
#header,#menu,#middle,.content,#footer {overflow:hidden;}
#header,#menu,.content,#footer {border:#000 1px solid;}
#middle {
  border-bottom:#000 1px solid;margin-bottom:2px;
  position:relative;top:-40px;min-height:100%;
}
.content {
  background-color:#fff;margin-top:194px;
  margin-bottom:-32600px;padding-bottom:32600px;
}
#header,#menu {position:absolute;width:988px;}
#header {top:2px;height:110px;}
#menu {top:116px;height:34px;}
#footer {margin-top:-40px;height:34px;}
*html #middle {overflow:visible;height:100%;}

Нюансы.

Сто процентная высота макета - есть сумма высот контейнеров header, menu, footer плюс border’ы и отступы между блоками и собственно высота центральной части.

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

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

Ничто не препятствует переходу от фиксированного по ширине макета к его ограничению по min/max-width.

Пример