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_1274185581.html <p>Собственно говоря, идея использовать border-style:double; для глобальной разметки web-страницы пришла спонтанно и довольно неожиданно, а давняя и «не ржавеющая» любовь к абсолютному позиционированию оказалась весьма кстати.</p> <p>Приверженность автора блога к колонкам равной высоты известна - все «прибамбасы», вроде индивидуального оформления колонок центральной части макета по цвету, имеют место быть, но мысль разбиения оных на составляющие при сохранении иллюзии одинаковой высоты колонок привлекла, но из-за отсутствия времени на тестирование, долго лежала в архиве.</p> <p>Но вот время нашлось, и вам предлагается необычный трюк с border-style:double; и его полноценная реализация, что-что, а в изобретательности Мастеру Горди отказать очень трудно и многие публикации на страницах блога лучшее тому подтверждение :)</p> <p>Не знаю насколько проще данная реализация, может выглядеть при табличной верстке, но как вы понимаете делать на таблицах нечто подобное, когда все уже выполнено на блоках-контейнерах, не входит в планы Мастера Горди даже ради спортивного интереса.</p> <p>Для начала <a href="i/border/border_d.png">скриншот</a>.</p> <p>Ничего не обычного.</p> <p>100% высота макета.</p> <p>Горизонтальное меню и header по html-коду расположены в самом конце страницы.</p> <p>Колонки центральной части – Left, Content, Right, а область контента выводится раньше боковых колонок при загрузке страницы, обладают иллюзией одинаковой высоты, независимо от наполнения любой из них.</p> <p>Дополнительные блоки, расположенные в этих колонках чуть выше, имеют фоновую заливку индивидуального цвета, а border цвета основной колонки, что не очень хорошо, но принципы построения web-страницы на основе колонок равной высоты не позволяют обойти данное препятствие.</p> <p>Теперь самое <strong>главное</strong>.</p> <p>Чтобы организовать нижний border у дополнительных блоков и визуально разделить их по вертикали необходимы - связка:<br><br> position:relative/absolute<br>border-style:double<br> а также наличие пустого контейнера с фоновой заливкой цвета body.</p> <p><a href="i/border/border_double.htm">Пример № 1</a></p> <p>Естественно, многое упрощается, если border у всех блоков будет одинаковым по цвету. Это касается как стилей, так и html-кода.</p> <p>При этом фоновая заливка у всех контейнеров может быть индивидуальной, также вместо нее подойдет и графика размноженная по вертикали.</p> <p><a href="i/border/border_double_01.htm">Пример № 2</a></p> <p>Расписывать в подробностях что, как, зачем и почему нет необходимости, забираем примеры и приятного вам времяпровождения :)</p> <p>Тут, важна идея, возможно, кому-то этот прием пригодится при создании подобной структуры глобальной разметки web-страницы.</p> <p>Практический пример.</p> <p>Взяв за основу скрипты от Мастера <a href="http://lasto.com/">Lasto</a>, как-то – nano-CMS и Google Referent, можно сотворить простенький новостийный <a href="http://trifler.ru/nano">ресурс</a>.</p> <p>Автор выражает признательность и благодарность Вадиму Ласто, в решении ряда технических проблем.</p> <p>Демо версию в самурайском стиле к скрипту Google Referent, смотрим <a href="http://lasto.com/referent/demo">здесь</a>.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1274185581.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1274185581.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_1274185581.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1274185581.html">All Comments</a></div> <!-- RSS_link_to_post end --> Tue, 18 May 2010 19:26:21 GMT