http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1260540815.html <pre class="postzit"> Попался въедливый клиент, ТЗ нарисовал в момент, Всё заливал, мол, Горди – бренд!? Приятно слушать этот бред: "Начало всех начал – CONTENT!!!" </pre> <br class="clear"> <p>Всегда казалось странным, почему абсолютное позиционирование довольно редко используется для создания глобальной разметки web-страницы.</p> <p>Где-то, что-то с помощью оного пристроить, подтянуть это да, а вот по настоящему, как-то не приходилось встречать.</p> <p>Одна из моих попыток, пусть там и рассматривался частный случай, была опубликована в <a href=http://trifler.ru/blog/comment_1230293406.html>"position:relative;overflow:hidden;border-top; Браузеры"</a></p> <p>Наверно, есть смысл отмотать кинопленку ;) немного назад и на основе примеров иллюстрирующих проблемы, изложенные в той статье, попробовать до минимума сократить все издержки.</p> <p>ТЗ будет простым и не замысловатым, состоящим всего из двух пунктов:</p> <ul><li>Сто процентная высота страницы</li> <li>Header и горизонтальное меню (может быть с вложениями) по html-коду, сброшено ниже области контента</li></ul> <pre class="pre"> &lt;body&gt; &lt;div id="middle"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; <span>&lt;div class="left"&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt;</span> &lt;/div&gt; &lt;div id="footer"&gt;Footer&lt;/div&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="menu"&gt;Горизонтальное меню&lt;/div&gt; &lt;/body&gt;</pre> <p>Вообще, с точки зрения SEO подобного рода структура web-страницы, является предпочтительной, но, к сожалению нельзя точно сказать в конкретном цифровом выражении, насколько она выгодно может отличаться от страниц сделанных по стандартной технике для поисковиков, тут только субъективные оценки.</p> <p>С другой стороны для пользователя, посетителя web-ресурса в этом есть смысл, если по каким либо причинам файл стилей не загружен, он будет избавлен от лицезрения header и того же горизонтального меню, особенно если оно будет выпадающим, с многочисленными вложениями, а такое встречается и довольно часто.</p> <p>Вот и давайте избавим наших читателей от бесполезной траты времени на прокрутку страницы по вертикали на пару-тройку экранов и будем первым отдавать контент при любом раскладе.</p> <p>Естественно, область контента может быть многоколоночной, в листинге html-кода дополнительные колонки выделены цветом, в этом случае потребуется соответствующая правка стилей.</p> <p>Примеров на страницах блога, как это сделать, вы найдете предостаточно, тем более, все измения будут касаться только центральной части макета.</p> <p>Таблица стилей:</p> <pre class="pre"> * {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;<span>top:-40px;</span>min-height:100%; } .content { background-color:#fff;<span>margin-top:194px;</span> margin-bottom:-32600px;padding-bottom:32600px; } #header,#menu {position:absolute;width:988px;} #header {<span>top:2px;</span>height:110px;} #menu {<span>top:116px;</span>height:34px;} #footer {<span>margin-top:-40px;</span>height:34px;} *html #middle {overflow:visible;height:100%;}</pre> <p>Нюансы.</p> <p>Сто процентная высота макета - есть сумма высот контейнеров header, menu, footer плюс border’ы и отступы между блоками и собственно высота центральной части.</p> <p>Достигается с помощью отрицательных/положительных значений margin-top и top, выделены цветом, подбираются индивидуально в зависимости от высоты тех или иных блоков или их исключении из html.</p> <p>При известном желании можно добиться полного исчезновения вертикальной прокрутки при минимуме информации в области контента.</p> <p>Ничто не препятствует переходу от фиксированного по ширине макета к его ограничению по min/max-width.</p> <p><a href="i/layouts/absolute/mfh.htm">Пример</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1260540815.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1260540815.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1260540815.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1260540815.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 11 Dec 2009 20:13:35 GMT