18 мая 2010, 16:26

Border Double – необычный трюк...

Собственно говоря, идея использовать border-style:double; для глобальной разметки web-страницы пришла спонтанно и довольно неожиданно, а давняя и «не ржавеющая» любовь к абсолютному позиционированию оказалась весьма кстати.

Приверженность автора блога к колонкам равной высоты известна - все «прибамбасы», вроде индивидуального оформления колонок центральной части макета по цвету, имеют место быть, но мысль разбиения оных на составляющие при сохранении иллюзии одинаковой высоты колонок привлекла, но из-за отсутствия времени на тестирование, долго лежала в архиве.

Но вот время нашлось, и вам предлагается необычный трюк с border-style:double; и его полноценная реализация, что-что, а в изобретательности Мастеру Горди отказать очень трудно и многие публикации на страницах блога лучшее тому подтверждение :)

Не знаю насколько проще данная реализация, может выглядеть при табличной верстке, но как вы понимаете делать на таблицах нечто подобное, когда все уже выполнено на блоках-контейнерах, не входит в планы Мастера Горди даже ради спортивного интереса.

Для начала скриншот.

Ничего не обычного.

100% высота макета.

Горизонтальное меню и header по html-коду расположены в самом конце страницы.

Колонки центральной части – Left, Content, Right, а область контента выводится раньше боковых колонок при загрузке страницы, обладают иллюзией одинаковой высоты, независимо от наполнения любой из них.

Дополнительные блоки, расположенные в этих колонках чуть выше, имеют фоновую заливку индивидуального цвета, а border цвета основной колонки, что не очень хорошо, но принципы построения web-страницы на основе колонок равной высоты не позволяют обойти данное препятствие.

Теперь самое главное.

Чтобы организовать нижний border у дополнительных блоков и визуально разделить их по вертикали необходимы - связка:

position:relative/absolute
border-style:double
а также наличие пустого контейнера с фоновой заливкой цвета body.

Пример № 1

Естественно, многое упрощается, если border у всех блоков будет одинаковым по цвету. Это касается как стилей, так и html-кода.

При этом фоновая заливка у всех контейнеров может быть индивидуальной, также вместо нее подойдет и графика размноженная по вертикали.

Пример № 2

Расписывать в подробностях что, как, зачем и почему нет необходимости, забираем примеры и приятного вам времяпровождения :)

Тут, важна идея, возможно, кому-то этот прием пригодится при создании подобной структуры глобальной разметки web-страницы.

Практический пример.

Взяв за основу скрипты от Мастера Lasto, как-то – nano-CMS и Google Referent, можно сотворить простенький новостийный ресурс.

Автор выражает признательность и благодарность Вадиму Ласто, в решении ряда технических проблем.

Демо версию в самурайском стиле к скрипту Google Referent, смотрим здесь.

Комментариев: 2

08 апреля 2010, 20:05

Секрет Полишинеля...

Собственно и секрета никакого нет. Все премудрости и тайны html и css, очень часто не стоят подробных описаний и примечаний чуть ли не каждой строчке кода.

Важна первоначальная идея и ее голое воплощение в примере.

Обладающим определенным опытом все будет понятно буквально с листа, не посвященным чуть труднее, но внимательный разбор тестовой страницы даст свои плоды и еще один пробел в знаниях легко устраняется и в будущем подобного рода приемы и методы помогут в решении более сложных проблем.

Многие задают вопрос, каким образом устранить не совсем адекватное поведение OPERA из одной предыдущей публикации.

Речь шла о размещении дополнительных блоков в колонках центральной части шаблона, которые всегда находятся внизу данных колонок.

Проблемный html-код:

<body>
<div id="middle">
  <div class="content">
    <div class="bottom_content">Content</div>
  </div>
  <div class="right">
    <div class="bottom_right">Right</div>
  </div>
</div>
<div id="footer">
  Footer
  <div class="border_content"></div>
  <div class="border_right"></div>
  <div class="footer_content">Блок content bottom</div>
  <div class="footer_right">Блок right bottom</div>
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>

Минимальные изменения:

<body>
<div id="middle">
  <div class="content">
    <div class="bottom_content">Content</div>
  </div>
  <div class="right">
    <div class="bottom_right">Right</div>
  </div>
</div>
<div id="footer">
  Footer
  <div class="border_content">
    <div class="footer_content">Блок content bottom</div>
  </div>
  <div class="border_right">
    <div class="footer_right">Блок right bottom</div> 
  </div>  
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>

Естественно, это влечет за собой правку стилей:

.footer_content,.footer_right {bottom:40px;}
.footer_content {left:3px;}
.footer_right {right:2px;}

Вот так простенько лечим OPERA :)

Прыг: 01 02 03 04 05 06 07 08 09 10 11

Скок: 10 20 30 40 50 60 70 80 90

HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

Border Double – необычный трюк...

Секрет Полишинеля...