Комплект шаблонов

Trifler Blog

Комплект шаблонов

Предлагаю вашему вниманию четыре макета. В них реализованы следующие возможности:

  1. Эмуляция max/min-width and min-height без expression для IE6. Все блоки, в том числе графика, фото, находящиеся в области контента и имеющие фиксированный размер по ширине больше определенного вами min-width, при уменьшении размеров окна браузера будут обрезаны справа, в любом случае это не приведет к нарушению разметки страницы.
  2. Иллюзия одинаковой высоты колонок. Не зависимо от наполнения информацией любой из них, все колонки всегда автоматически выравниваются по высоте, что дает возможность каждой колонке задать свой background-color: или background:url(...). Может быть, это кому-то покажется необязательным, но иметь лишний козырь в рукаве никогда не помешает.
  3. Контент выводится раньше колонок навигации, что при включенных/отключенных стилях дает преимущество с точки зрения SEO.

К этому можно добавить хорошо структурированные стили, всего двадцать с небольшим строк определяющие функциональность отмеченную выше, для всех четырех макетов. Без ложной скромности, чего-чего, а от отсутствия оной уж точно не помру :) ничего подобного ранее мне не встречалось. Так или иначе, все озвученные ранее на страницах блога приемы и методы для решения подобных проблем, вошли в заключительный вариант.

Кроме одной строчки стилевых правил, касающейся конкретно IE6, нет никаких специальных стилевых правил для остальных популярных браузеров – FireFox, OPERA, Safari, IE7.

Все макеты не однократно проверены на практике и показали хорошую устойчивость и повторяемость в различных вариантах оформления. Испытательным полигоном, как всегда служили скрипты Мастера Lasto – последние апгрейды блога, портаторы разных версий, три модификации nano-CMS.

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

Универсальность предложенного решения заключается в быстром переходе от одного макета к другому. Это осуществляется прописыванием в body соответствующего идентификатора и небольшой редакцией html-кода, которые полностью определяют разметку страницы. html-код каждой конкретной страницы размещен на тестовых страницах. Там же находится дополнительная информация.

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

Стили комплекта шаблонов:

* {margin:0;padding:0;}
body {background-color:#555;font:11px/1.18 verdana,arial,helvetica,sans-serif;}
#gordi,#content {margin:5px 1%;padding:0 0 0 920px;}/* max/min-width 3 колонки */
#gordi #trifler,#content #trifler {margin:0 0 0 -920px;}/* max/min-width 3 колонки */
#left,#right {margin:5px 7%;padding:0 0 0 720px;}/* max/min-width 2 колонки */
#left #trifler,#right #trifler {margin:0 0 0 -720px;}/* max/min-width 2 колонки */
#trifler {position:relative;}
*html #trifler {float:right;}/* IE6 */
#header {background-color:#f9f9f9;border:silver 1px solid;border-bottom:0;height:100px;}
#header h2 {color:#aaa;cursor:default;font:bold 25px georgia,Helvetica,sans-serif;margin:0 0 0 40px;}
.main {border:silver solid;border-width:0 1px;}
.main,.center,.left,.right {overflow:hidden;zoom:1;position:relative;}
.wrap,.center {background-color:#fff;width:100%;}
.wrap,.left,.right {float:right;margin-bottom:-32767px;padding-bottom:32767px;}
.content {min-height:445px;height:auto !important;height:445px;}/* min-height */
.left {background:url(../i/left.png) repeat-y #f9f9f9;width:200px;}
.right {background:url(../i/right.png) repeat-y #f5f5f5;width:200px;}
#left .content {padding-left:200px;}
#right .content {padding-right:200px;}
#gordi .center,#gordi .left,#right .center,#left .left {margin-right:-200px;}
#content .center {margin-right:-400px;}
#content .content {padding-right:400px;}
#gordi .content {padding:0 200px;}
#gordi .center,#content .center,#right .center {float:left;}
.footer {background-color:#fbfbfb;border:silver 1px solid;clear:both;text-align:center;height:28px;}
.tmenu {background-color:#f9f9f9;border:silver 1px solid;text-align:center;height:16px;padding:8px 0;}

Пояснения:

max-width для макетов задан так - выделено красным цветом

min-width для макетов задан так - выделено синим цветом

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

Смотрим:

  1. left-content
  2. left-content-right
  3. right-content
  4. content-right-left

Естественно, а комплект шаблонов адаптирован под разрешение 1024*768, но по моей личной статистике потихоньку начинает преобладать 1280*ХХХХ, вы можете скомпенсировать визуальные разночтения при переходе с одного разрешения к другому используя скрипт предложенный Мастером Lasto и описанный мной в position:absolute; Ликбез.

Для скачивания zip-архива совершите "маленький хадж", Мастер простите за плагиат :) на специальную страницу, она создана с целью узнать статистику, насколько востребованным окажется предложенный вам материал.

P.S. Наиболее полно использование комплекта шаблонов проявляет себя в новой редакции "Lasto nano-CMS engine". Для каждой вложенной папки внутренних страниц данного скрипта, можно легко и непринужденно задать собственную разметку с соответствующим оформлением. Насколько это будет востребовано и необходимо, решать поклонникам цифровых продуктов Мастера, но такая возможность существует, и надеюсь, придаст толику разнообразия вашим ресурсам.

P.P.S. Посмотреть один из вариантов практического применения на основе скритпта "Lasto Blog", можно на созданном мной специальном ресурсе, посвященного проблемам верстки и не только.

Комментарии к этой заметке больше не принимаются.


Рейтинг популярности - на эти заметки чаще всего ссылаются:

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

апрель, 2008
пн вт ср чт пт сб вс
  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 30        
free  counters