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_1250528203.html <pre class="postzit"> Нет, беспросветна эта тьма, Сбежали из шестой палаты... И сводят дружно WEB с ума, Маржины, падинги, флоаты. Зверинец браузеров - психов, По сути дела, та же масть... Ох, не будите братцы лихо, Легко в том омуте пропасть ;) <p>Gordi</p></pre> <br class="clear"> <p>Продолжим тему если не новой, то уж точно мало известной и недостаточно популярной техники создания колонок равной высоты.</p> <p>В <a href="http://trifler.ru/blog/comment_1249981035.html">двух</a> предыдущих <a href="http://trifler.ru/blog/post_1250171170.html">публикациях</a> посвященной этой теме, основной упор был сделан на макетах, в которых все колонки имели индивидуальный цветной border и разноцветную фоновую заливку.</p> <p>К сожалению, как уже упоминалось, добиться резиновой области контента, пока не удалось.</p> <p>Не много по игравшись и отложив поиск решения на потом, задался целью - исключить так ли уж необходимый border и использовать данный прием для макета "кирпич", как я его называю.</p> <p>Посмотрим пару скриншотов:</p> <img src="i/layouts/boom/boom_01.png" style="display:block;margin:10px auto;width:475px;height:197px;" alt="boom_01"> <p>Первый из коллекции прошлых статей покрасивше будет, но как уже говорил, здесь все колонки с фиксированной шириной, линки на обновленные примеры в конце статьи.</p> <p>Второй, тема сегодняшнего поста.</p> <p>По html-коду никаких различий не имеется, область контента "резиновая", не единственным недостатком, на мой взгляд, является, то обстоятельство, что все слито воедино. Нет четко очерченных границ между колонками.</p> <p>Возможно это не принципиальный момент. На любителя, мои предпочтения склоняются к разметке на основе первого скриншота.</p> <p>Кратко, о том, в чем же смысл предлагаемого.</p> <pre class="pre"> &lt;div id="right"&gt; &lt;div id="left"&gt; &lt;div id="content"&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; &lt;/div&gt;</pre> <p>Вложенные друг в друга контейнеры с идентификаторами позиционируются соответствующим образом при помощи float и задают цвет нашим колонкам.</p> <p>В контейнерах с классами, находится информация и блоки с ней с помощью float и относительного позиционирования размещаются там, где необходимо.</p> <p>Как обычно, стараюсь представить своим читателям пять вариантов расположения колонок навигации относительно области контента.</p> <p>Ссылки на примеры чуть ниже, но без разночтений при просмотре в различных браузерах, не обошлось.</p> <p>При использовании данной техники придания иллюзии равной высоты колонкам макета, лучше всех ведут себя, вы будете удивлены – IE6(7).</p> <p>Все пять вариантов работают в них отлично, как хорошие швейцарские часы.</p> <p>В группу риска, как всегда попала "северная ведьма", иначе "норвежская красавица" :)</p> <p>Имеются проблемы и в остальных популярных браузерах, не большие примечания на тестовых страницах, в них все довести до ума не получилось, там, где случилось так, просто иллюстрация проблем, и задел работы на будущее.</p> <p>Примеры по скриншоту номер один:</p> <ul> <li><a href="i/layouts/boom/boom_lc_end.htm">left-content</a></li> <li><a href="i/layouts/boom/boom_lcr_end.htm">left-content-right</a></li> <li><a href="i/layouts/boom/boom_lrc_end.htm">left-right-content</a></li> <li><a href="i/layouts/boom/boom_clr_end.htm">content-left-right</a></li> <li><a href="i/layouts/boom/boom_cr_end.htm">content-right</a></li> </ul> <p>Примеры по скриншоту номер два:</p> <ul> <li><a href="i/layouts/boom/boom_lc_no_border.htm">left-content</a></li> <li><a href="i/layouts/boom/boom_lcr_no_border.htm">left-content-right</a></li> <li><a href="i/layouts/boom/boom_lrc_no_border.htm">left-right-content</a></li> <li><a href="i/layouts/boom/boom_clr_no_border.htm">content-left-right</a></li> <li><a href="i/layouts/boom/boom_cr_no_border.htm">content-right</a></li> </ul><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1250528203.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1250528203.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_1250528203.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1250528203.html">All Comments</a></div> <!-- RSS_link_to_post end --> Mon, 17 Aug 2009 23:56:43 GMT