| февраль, 2012 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | ||||
Собственно говоря, идея использовать border-style:double; для глобальной разметки web-страницы пришла спонтанно и довольно неожиданно, а давняя и «не ржавеющая» любовь к абсолютному позиционированию оказалась весьма кстати.
Приверженность автора блога к колонкам равной высоты известна - все «прибамбасы», вроде индивидуального оформления колонок центральной части макета по цвету, имеют место быть, но мысль разбиения оных на составляющие при сохранении иллюзии одинаковой высоты колонок привлекла, но из-за отсутствия времени на тестирование, долго лежала в архиве.
Но вот время нашлось, и вам предлагается необычный трюк с border-style:double; и его полноценная реализация, что-что, а в изобретательности Мастеру Горди отказать очень трудно и многие публикации на страницах блога лучшее тому подтверждение :)
Не знаю насколько проще данная реализация, может выглядеть при табличной верстке, но как вы понимаете делать на таблицах нечто подобное, когда все уже выполнено на блоках-контейнерах, не входит в планы Мастера Горди даже ради спортивного интереса.
Для начала скриншот.
Ничего не обычного.
100% высота макета.
Горизонтальное меню и header по html-коду расположены в самом конце страницы.
Колонки центральной части – Left, Content, Right, а область контента выводится раньше боковых колонок при загрузке страницы, обладают иллюзией одинаковой высоты, независимо от наполнения любой из них.
Дополнительные блоки, расположенные в этих колонках чуть выше, имеют фоновую заливку индивидуального цвета, а border цвета основной колонки, что не очень хорошо, но принципы построения web-страницы на основе колонок равной высоты не позволяют обойти данное препятствие.
Теперь самое главное.
Чтобы организовать нижний border у дополнительных блоков и визуально разделить их по вертикали необходимы - связка:
position:relative/absolute
border-style:double
а также наличие пустого контейнера с фоновой заливкой цвета body.
Естественно, многое упрощается, если border у всех блоков будет одинаковым по цвету. Это касается как стилей, так и html-кода.
При этом фоновая заливка у всех контейнеров может быть индивидуальной, также вместо нее подойдет и графика размноженная по вертикали.
Расписывать в подробностях что, как, зачем и почему нет необходимости, забираем примеры и приятного вам времяпровождения :)
Тут, важна идея, возможно, кому-то этот прием пригодится при создании подобной структуры глобальной разметки web-страницы.
Практический пример.
Взяв за основу скрипты от Мастера Lasto, как-то – nano-CMS и Google Referent, можно сотворить простенький новостийный ресурс.
Автор выражает признательность и благодарность Вадиму Ласто, в решении ряда технических проблем.
Демо версию в самурайском стиле к скрипту Google Referent, смотрим здесь.
Собственно и секрета никакого нет. Все премудрости и тайны 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 :)
Вариации на тему – «Есть две новости - первая плохая, вторая хорошая», как нельзя лучше соответствуют ожиданиям web-верстальщиков. Выход свежей версии практически любого популярного браузера довольно часто приводит к переоценке, казалось бы, незыблемых, прочно устоявшихся решений.
Русский язык богат на все возможные выражения позитивных и негативных эмоций, состоящие из одного слова, вот и будем сегодня использовать для этого поста парочку слов начинающихся на букву «х...».
Вместо многоточия вы можете довольно легко и просто самостоятельно найти и подставить нужное в том или ином случае продолжение.
По ряду причин мастер Горди лишен возможности без лишних телодвижений, использовать горячо «любимый» IE6. Нет, понятно, что, достав еще один ноут, который давно пылится на полке проблему можно решить очень просто, но три компа на рабочем столе явный перебор.
Наличие флешки, во многом упрощает перенос информации с одного компьютера на другой, что «х...», но неизбежные в этом случаи потери времени говорят о том, что это «х...».
Выход OPERA 10.50 (10.51) привел к тому, что часто используемый css хак:
@media all and () {.XXX {color:#F00;}}
прекрасно работающий в OPREA 9.64 (10.10), новыми версиями не поддерживается, что как вы понимаете «х...».
Совместный css хак для OPERA и IE8 собственного изобретения:
.XXX {color:#F00\0;}
многое упрощает, что «х...», но часто приводит к дополнительным записям в файле стилей css хака, конкретно для IE8, найденного мной:
.XXX {color:#F00\0/;}
что по вполне понятным причинам может быть «х...».
Вот такие они новости на букву «х...» ;)
Горизонтальный banner counters.php - width:494px;
| февраль, 2012 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | ||||