| декабрь, 2009 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
Попался въедливый клиент, ТЗ нарисовал в момент, Всё заливал, мол, Горди – бренд!? Приятно слушать этот бред: "Начало всех начал – CONTENT!!!"
Всегда казалось странным, почему абсолютное позиционирование довольно редко используется для создания глобальной разметки web-страницы.
Где-то, что-то с помощью оного пристроить, подтянуть это да, а вот по настоящему, как-то не приходилось встречать.
Одна из моих попыток, пусть там и рассматривался частный случай, была опубликована в "position:relative;overflow:hidden;border-top; Браузеры"
Наверно, есть смысл отмотать кинопленку ;) немного назад и на основе примеров иллюстрирующих проблемы, изложенные в той статье, попробовать до минимума сократить все издержки.
ТЗ будет простым и не замысловатым, состоящим всего из двух пунктов:
<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.
Горизонтальный banner counters.php - width:494px;
| декабрь, 2009 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||