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_1236947776.html <p>Довольно часто при глобальной разметке <em>web</em>-страницы приходится использовать и <em>относительное</em> позиционирование. Многие варианты подобных макетов были предложены мной в цикле <a href="http://trifler.ru/blog/comment_1216836960.html">"Иллюзия идеала…"</a>, в не законченном сериале <a href="http://trifler.ru/blog/comment_1229535735.html">"Техника Gordi…"</a>, да и в попытках решать проблему, вообще, без <a href="http://trifler.ru/blog/comment_1231439010.html">float</a>.</p> <p>Целесообразность применения данного стилевого правила, особенно в связке с моим излюбленным приемом:</p> <pre class="pre"> margin-bottom:-32767px;padding-bottom:32767px;</pre> <p>давно вызывала вполне закономерные сомнения, дело даже не в том, что в ряде случаев это приводит возникновению бесконечной вертикальной прокрутки, методы борьбы найдены и отрепетированы.</p> <p>Вопрос, а зачем собственно, нужен <em>position:relative</em>? Не уже ли не достаточно только <em>float</em>?</p> <p>Вот и озадачившись озвученной проблемой, провел не большое исследование, с итогами которого вам и предлагаю ознакомиться.</p> <p>С чем будем работать?</p> <p>Два варианта разметки.</p> <p>Принципы, почему именно такая компоновка страницы, хотя они не однократно опубликованы, будет не лишним повторить:</p> <ul> <li>Область контента выводится раньше колонок навигации</li> <li>Иллюзия равной высоты колонок с независимой фоновой заливкой или (background:url(XXX.png) repeat-y #XXX;)</li> <li>Легкий переход к различному расположению колонок навигации относительно области контента.</li> <li>Сто процентная высоты страницы с включением <em>header</em>-а и <em>footer</em>-а без вертикальной прокрутки при минимуме информации в колонках.</li></ul> <p><em>Единственный</em> минус – отсутствие поддержки меток-якорей для перемещения по <em>web</em>-странице.</p> <p>В первом случае полноценная страница со всеми атрибутами – главное, работающая эмуляция <em>min/max-width</em> для IE6, потребовавшая наличия дополнительного контейнера, что не отличается от <em>html</em>-кода по приведенным выше ссылкам:</p> <pre class="pre"> &lt;div id="middle"&gt; &lt;div class="main"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; &lt;div class="left"&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>В варианте под номером два, сделана попытка, избавится от контейнера с классом <em>main</em>:</p> <pre class="pre"> &lt;div id="middle"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; &lt;div class="left"&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt;</pre> <p>Это не просто сдвиг на уровень вверх, с передачей части стилей <em>body</em>, что уже неоднократно предлагалось, а в некоторых макетах и было реализовано.</p> <p>К сожалению, тут маленькая неприятность. От эмуляции <em>min/max-width</em> для IE6, пришлось отказаться, возможно, и эту проблему удастся решить, а так ему указан фиксированный размер по ширине.</p> <p>Но минимально возможный <em>html</em>-код с лихвой окупает урезанный функционал для "всенародно любимого" браузера.</p> <p>Как всегда <a href="float.html">примеры</a> имеют по пять вариантов, ничто не мешает увеличить их количество, меняя ширину колонок отведенных под навигацию сделав их разными по ширине, но это уже <em>вариации</em> на тему.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236947776.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236947776.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_1236947776.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236947776.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 13 Mar 2009 18:36:16 GMT