Предлагаю вашему вниманию четыре макета. В них реализованы следующие возможности:
К этому можно добавить хорошо структурированные стили, всего двадцать с небольшим строк определяющие функциональность отмеченную выше, для всех четырех макетов. Без ложной скромности, чего-чего, а от отсутствия оной уж точно не помру :) ничего подобного ранее мне не встречалось. Так или иначе, все озвученные ранее на страницах блога приемы и методы для решения подобных проблем, вошли в заключительный вариант.
Кроме одной строчки стилевых правил, касающейся конкретно 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, чтобы более четко отделить область контента от колонок отведенных под меню.
Смотрим:
Естественно, а комплект шаблонов адаптирован под разрешение 1024*768, но по моей личной статистике потихоньку начинает преобладать 1280*ХХХХ, вы можете скомпенсировать визуальные разночтения при переходе с одного разрешения к другому используя скрипт предложенный Мастером Lasto и описанный мной в position:absolute; Ликбез.
Для скачивания zip-архива совершите "маленький хадж", Мастер простите за плагиат :) на специальную страницу, она создана с целью узнать статистику, насколько востребованным окажется предложенный вам материал.
P.S. Наиболее полно использование комплекта шаблонов проявляет себя в новой редакции "Lasto nano-CMS engine". Для каждой вложенной папки внутренних страниц данного скрипта, можно легко и непринужденно задать собственную разметку с соответствующим оформлением. Насколько это будет востребовано и необходимо, решать поклонникам цифровых продуктов Мастера, но такая возможность существует, и надеюсь, придаст толику разнообразия вашим ресурсам.
P.P.S. Посмотреть один из вариантов практического применения на основе скритпта "Lasto Blog", можно на созданном мной специальном ресурсе, посвященного проблемам верстки и не только.
Горизонтальный 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 | ||||