Абсолютное позиционирование и колонки равной высоты html/css изыски... Универсальный графический контейнер
Trifler Blog
Абсолютное позиционирование и колонки равной высоты
В любой сфере деятельности, а будем говорить применительно к web-верстке, встречаются побочные эффекты. Собственно, в этом нет ничего необычного. Все в основном сводится к правке косяков и кривостей в тех или иных браузерах.
Другое дело, что иногда, минусы побочных эффектов можно обратить и в свою пользу, даже отказавшись от устоявшихся, укоренившихся подходов к решению тех или иных проблем.
Очень часто верстальщики, как начинающие, так и профессионалы для создания иллюзии одинаковой высоты колонок центральной части макета используют стилевые правила:
margin-bottom:-32767px;padding-bottom:32767px;
Побочные эффекты разметки на их основе давно известны:
- Не удачное сочетание стилей может привести к появлению бесконечной вертикальной прокрутке web-страницы
- Отсутствие нижнего border’a у колонок
- Не корректная работа меток-якорей
Если два первых пункта при грамотной реализации и не больших издержках в виде лишних контейнеров для прорисовки нижнего border’a не являются непреодолимыми, то проблема работы меток-якорей решения на сегодняшний день не имеет.
Предлагаемая вам разметка практически полностью лишена перечисленных недостатков, за исключением дополнительных блоков.
Чисто технические сложности при переходе от фиксированного макета к полу-резине или полностью резиновому шаблону, связанные с абсолютным позиционированием и процентными величинами, чуть все усложняет в таблице стилей, не более того.
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.
Универсальный графический контейнер
Автор блога, слывущий в узких кругах Мастером Горди, не является профессиональным web-верстальщиком и уж тем более, боже меня упаси, профессиональным web-дизайнером.
В первом случае хобби и не более того, а во втором и вовсе ноль без палочки :)
В любом случае нисколько не переоцениваю свои возможности, так как всегда предпочитал заниматься тем, что нравиться и к чему лежит душа.
Сегодня речь пойдет о графике, вернее о проблеме, как оную заставить растягиваться не только по высоте, что довольно просто и в общем-то не вызывает никаких вопросов, но и по ширине.
Как вы понимаете, решений имеется масса, но в большинстве своем все они требуют, на мой взгляд, не оправданных изысков как по html-коду, так и по стилям. Не говоря уж о сложности нарезки графики и состыковки нарезанных кусочков в единое целое.
Зададимся вопросом, есть ли универсальный способ позволяющий решить заявленную проблему?
Еще раз повторю – есть графический элемент web-страницы, в нем может находиться все что угодно, нам надо заставить этот блок растягиваться как по высоте, так и по ширине.
Главная идея метода состоит в том, что необходимо все выполнить с минимумом графики, разметки и стилей, описывающих ее поведение.
Как вы думаете, сколько графических файлов надо для выполнения поставленной задачи?
Наверное, удивитесь, когда я произнесу магическую цифру два. Да именно столько и не файлом больше.
Все остальное это оптимизация html-кода и стилей.
Графика.
Первый файл уменьшенная копия, все зависит от того, какая ширина необходима в конечном итоге, тут естественно надо брать с запасом.
Второй файл вырезан из первого – центральная часть.
html
<div class="top"><div></div></div>
<div class="middle">
<div>Content</div>
</div>
<div class="bottom"><div></div></div>
Стили
* {margin:0;padding:0;}
body {
background-color:#fff;
margin:0 auto;
min-width:500px;
max-width:80%;
}
.top,.middle,.bottom {padding:0 0 0 14px;}
.top div,.bottom div {height:12px;}
.top {margin-top:20px;background:url(tb.png);}
.top div {background:url(tb.png) no-repeat right top #fff;}
.middle {background:url(tb_m.png);}
.middle div {
background:url(tb_m.png) right top #eee;
padding:5px 19px 5px 3px;}
.bottom {background:url(tb.png) no-repeat 0 -24px;}
.bottom div {background:url(tb.png) no-repeat right -24px #fff;}
p {padding:0 10px;text-align:justify}
/* hack for IE6 */
*html body {
width:expression(
document.documentElement.clientWidth < 500 ? '500px' :
(document.documentElement.clientWidth > 80 ? '80%' : 'auto'));
}
Вот собственно и все. Поставленная задача решена - минимум графики, работает везде, а про html-код и стили и говорить не чего - просто конфетка :)
Идем и смотрим пример.
Для проявления эффекта уменьшаем размер окна браузера по горизонтали, также меняем разрешение экрана монитора.
Горизонтальный banner counters.php - width:494px;