| февраль, 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 | ||||
Из того, что не вошло в "Иллюзию идеала". body самодостаточный блок по своей сути, но почему-то редко используется в этой роли. Целесообразность в наличии дополнительного контейнера, в котором находятся те же – шапка, собственно тело страницы и подвал, часто вызывает известные сомнения. Понятно, что тут играет роль чисто индивидуальный подход, но в большинстве случаев может прекрасно обойтись и без него.
Cтранно, что очень многие этим злоупотребляют.
А, что делать - привычка вторая натура :)
В любом случае, body позволяет полноценно использовать функционал общего блока.
html
</head>
<body>
.
.
.
</body>
</html>
css
* {margin:0;padding:0}
html {background-color:#ddd;height:100%;}
body {
background-color:#fff;
border:#000 1px solid;
margin:1px auto;
min-width:720px;
max-width:800px;
min-height:100%;
height:100%;
}
*html body {width:800px;}
body {#padding-bottom:5px;}
Последняя строка в стилях, дает нужный отступ для IE 6(7) в FF,OPERA в нем нет нужды.
Как видим все очень просто.
Все без начала и конца, Парад иллюзий бесконечен, Жаль, идеал не безупречен, Но ждет его, рука творца…Gordi
Заключительная часть мини-сериала.
Вот и пришло время собрать наш конструктор, как его иначе назовешь, к тому же "слоеный пирог" уже был.
Более или менее подробно все основные, узловые моменты освещены ранее. По игравшись с примерами, линк на которые будет приведен ниже, надеюсь, что вы в полной мере оцените предлагаемое мной решение.
В нем нет ничего такого, что бы можно было назвать – "принципиально новым словом в верстке", все не однократно встречалось и прежде, просто компоновка слоев, их внутренняя структура полностью укладывается в мое личное представление блочно-модульноq концепции и понимании того, как же должна быть сделана web-страница.
Легкая смена оформления, изначально заложенная в глобальную разметку, открывает по истине ничем неограниченные перспективы, все только зависит от вашей фантазии и изобретательности. Все настройки просты и дают массу возможностей для самовыражения.
Кроме нескольких строчек в файле стилей для "любимого" браузера, нет никаких дополнительных спец. правил для самых популярных браузеров – OPERA 9.xx, FireFox 2.xx(3.xx), IE (6)7. Следовательно, при появлении обновлений не будет никаких проблем в визуальном отображении предлагаемого макета. Появится официальная стабильная версия IE 8, как говориться будем посмотреть, но не думаю, что там ждут непреодолимые препятствия, если вообще возникнут.
В таблице стилей вы не найдете тех или иных экзотических стилевых правил, все на уровне начинающего - float, margin, padding, нет необходимости ломать голову, чтобы это значило и лезть в спецификации и прочие мануалы. Для удобства стили разбиты на секции, и не которые из них, вообще, нет необходимости править.
И все же…
Не даром цикл называется "Иллюзия идеала" Это только первый, но не последний шаг к цели и у этой дороги нет ни начала, ни конца.
Пара проблемных моментов.
Если вам вдруг понадобится разместить в области контента, что-то объемом прядка «Война и мир» Льва Николаевича и использовать метки для перемещения по странице без перезагрузки оной, то вам не повезло. На сколько это является минусом, не знаю, но и делать нечто похожее, в интерфейсе данной, да и любой другой разметки не самое лучшее решение.
Отдельная страница, вот выход из сложившейся ситуации. Никакие header, footer, menu, рекламные блоки не будут отвлекать вашего читателя от проникновения в глубину ваших замыслов, если вы, конечно, сможете удержать его внимание при прочтении на должном уровне, предлагая столь объемный многостраничный труд.
Может выглядеть приблизительно так. Старый мануал по стилям к скриптам Мастера Lasto, впору переписывать, для решения проблемы озвученной чуть выше, подойдет в самый раз.
Возможно, когда-нибудь, смогу уделить решению этой проблемы часть своего времени, а может быть, все изменится, и просто поменяв внутреннюю часть блока middle, проблема решится сама собой. Посмотрим.
Так же, при предварительном просмотре печати в окне браузера, не которые представленные варианты разметки, особенно в "любимом" браузере, будут искажены. Естественно, тогда печать страницы невозможна, связанно с особенностями разметки и решения пока не имеет. В общем случае поступаем так, копируем нужный фрагмент в буфер обмена, открываем Word или любой другой текстовый редактор, тот же блокнот к примеру, вставляем, печатаем.
Задайте себе вопрос. Нужна ли вам полностью отпечатанная web-страничка со всеми элементами интерфейса? По моему нет. Так, что не стоит сильно огорчаться по этому поводу.
Напоминаю, все вопросы касающиеся высоты макета на всю высоту окна браузера при минимуме информации, буду проигнорированы. Если вам удастся это сделать, без лишнего html-кода и обойтись минимумом стилей без хаков, именно при такой структуре страницы, честь вам и хвала, только порадуюсь вместе с вами. Может быть, вы представите возможность заинтересованным лицам воспользоваться плодами вашего решения, а мне будет с чем сравнить, имею ввиду собственный вариант. Который никогда, подчеркиваю никогда и ни при каких обстоятельствах не будет отпущен в свободное плаванье.
Есть ряд нюансов не нашедших отражения в данном цикле, но автору они кажутся на столько естественными и простыми, и решаются они на раз-два, что он не придает/предал им должного значения. В любом случае задав вопрос в комментария, вы получите необходимую помощь.
В ближайшее время, автор не планирует никаких публикаций продолжающих и развивающих эту тему. В дальнейшем, при наличии желания и времени, особое внимание будет уделено оптимизации html-кода и стилей блока middle, но на сегодняшний день тема практически полностью себя исчерпала, по крайней мере, как лучше - мне так кажется или я так думаю?
Вот собственно и все.
Примеры. Часть из них использует графику. Не обессудьте за большой объем оной. Ясное дело, сделано не в Photoshop, не оптимизирована. Вертикальный border в модулях header, footer оставлен специально, для более четкого представления, где какой блок заканчивается/начинается, при настройке ширины колонок не заменимая вещь. В дальнейшем при необходимости просто удаляется.
Пользователям продуктов Мастера Lasto.
В будущем, на данном макете предполагается обновление многих его скриптов. В первую очередь Gold Shop и линейка магазинов на его основе, далее апгрейд блога и по желанию новая версия nano-CMS, портатор.
У вас есть время и хорошая возможность для экспериментов и практических опытов, чтобы подготовиться к нововведениям.
P.S. "А на последок я скажу…." Нигде, ничего, подобного на ресурсах посвященных верстке, что за бугром, что в Раша, вы не найдете. Там вам будут предложены лишь полуфабрикаты, все жалкие попытки приблизиться к "Иллюзии идеала", в большинстве случаев, убогая пародия, обреченная на провал.
Так, что смотрим, забираем, оформляем под свои задачи и в бой.
Жизнь так устроена, увы… Полны иллюзий дни и ночи, Но, а, по сути, только прочерк, Есть линия твоей судьбы…Gordi
Может быть не совсем удачное название для данного контейнера, но куда лучше безликого center. Центр чего? Вселенной? Вы в праве переименовать его, как вам будет угодно, это касается и находящихся в нем блоков.
Но…
Middle. Середина чего-то. Жизни, дня, ночи…
Что-то уже было, что-то еще будет. Нет, есть в этом какой-то не разгаданный, непостижимый смысл бытия. Возможно, настроение сегодня ни к черту или…
Меня давно занимала возможность создать настоящую блочно-модульную конструкцию web-страницы, позволяющую легко и непринужденно подстраивать ее под любой проект. Тем более, верстка слоями, как нельзя лучше сопутствует всем необходимым условиям в этом смысле.
Не последнюю роль тут сыграла и профессия. Радиоэлектроника, она же в качестве приложения, к сожалению уже в прошлом – хобби.
Блочно-модульный принцип, это нечто, поверьте на слово маньяку радиолюбителю со стажем, даже делая совершенно эксклюзивные, единичные экземпляры могу с полным на то основанием сказать – оно стоит того. Минимальные завязки друг на друга, практически полная независимость одного слоя от другого, плавно переходим к верстке, да и внутри самого слоя, если максимально выдерживать тот же принцип, появится масса нужных и приятных вещей.
Причем это является всеобщей тенденцией, практически во всех областях и грозит полной унификацией.
Куда катится мир :)
И, что тогда придется делать бедному верстальщику? Поживем, увидим.
А в качестве примера, внимательно посмотрите на свой компьютер, вернее его нутро, возможности апргейда практически безграничны, а блочно-модульный принцип, заложенный в него, всем только в радость.
Но обо всем по порядку.
Естественно, что наполнение блока middle, точнее его внутренняя структура может значительно отличаться оттого, что предложено мной. Другое дело, что многие решения по разбивке слоя на колонки должны, как минимум в большей своей части соответствовать требованиям, которые не однократно были изложены на страницах блога, потратив толику времени, вы найдете этот не хитрый список.
В качестве практически идеального модуля предлагаю вашему вниманию такую конструкцию. В ней есть, на сколько мне пока известно, только один минус, но об этом чуть позже в заключительной части цикла "Иллюзия идеала". Буду рад, если вы примете не посредственное участие в тестировании не только в самых популярных браузерах OPERA 9.xx, FF2.xx(3), IE6(7). Что мной, в общем-то, уже сделано, но и более, экзотических и выскажете свое мнение по этому поводу.
html-код блока middle:
<div id="middle">
<div class="wrap">
<div class="main">
<div class="center">
<div class="content">Center</div>
</div>
<div class="left">Left</div>
</div>
</div>
<div class="right">Right</div>
</div>
Все встречалось бесчисленное количество, раз и уже давно стало классикой жанра. Так, что подробно останавливаться на html нет особых причин.
Лучше обратимся к стилям описывающих его поведение.
css
* {margin:0;padding:0;}
body {background-color:#fff;font:11px;tahoma,arial,serif;padding:top:150px;position:pelative;}
#middle {margin:0 auto;overflow:hidden;min-width:780px;max-width:960px;}
#middle .wrap {margin-right:-200px;}
#middle .main {margin-right:200px;}
#middle .center {margin-left:-200px;}
#middle .content {margin-left:200px;padding-top:10px;}
#middle .left {background:url(../i/left.png) repeat-y #eee;width:200px;}
#middle .right {background:url(../i/right.png) repeat-y #ddd;width:200px;}
.wrap,.center,.content,.left,.right {margin-bottom:-32767px;padding-bottom:32767px;}
.wrap,.center {width:100%;}
.wrap,.left {float:left;}
.center,.right {float:right;}
*html #middle {width:960px;}
*html .content {zoom:1;}
Часть из них определяющие внешнюю сторону оформления блока middle вам встречалась в предыдущем посте. Рассмотрим более подробно внутреннюю часть.
Следующие строки таблицы стилей определяют общие правила поведения слоев, а именно - #header,#middle,#footer. В ней ничего трогать не надо. Мог бы конечно объяснить, что и почему, куда и зачем, но с практической точки зрения не вижу никаких оснований рассказывать об этом.
.wrap,.center,.content,
.left,.right {margin-bottom:-32767px;padding-bottom:32767px;}
.wrap,.center {width:100%;}
.wrap,.left {float:left;}
.center,.right {float:right;}
Другая часть:
#middle .wrap {margin-right:-200px;}
#middle .main {margin-right:200px;}
#middle .center {margin-left:-200px;}
#middle .content {margin-left:200px;padding-top:10px;}
#middle .left {background:url(../i/left.png) repeat-y #eee;width:200px;}
#middle .right {background:url(../i/right.png) repeat-y #ddd;width:200px;}
Строго индивидуальна для блока middle и определяет ширину колонок и заливку фоном или возможность использования графики через background:url(../i/right.png) repeat-y #ddd;
Ширина левой и правой колонок по дефолту имеют одинаковую ширину 200px, а центральная колонка занимает все оставшееся место.
Чтобы изменить ширину боковых колонок, надо поменять некоторые параметры. Это никоим образом не говорит о том, что они должны быть одинаковой ширины. Эти же параметры позволяют легко прейти к варианту двух колоночного макета с удалением из html-кода соответствующей колонки правой или левой и корректировкой значения max-width, если потребуется.
Теперь вертикальные линии, что отделяют область контента от колонок отведенных под навигацию и рекламные блоки. Обращаю ваше внимание, что это обычный border и прописывать его необходимо только контейнеру с классом content.
В IE6 блок middle имеет фиксированную ширину. Но через width:expression проблема легко решается. Просто не много достал "любимый" браузер, вот его и приструнил :)
С целью уменьшения объема файла стилей управление оформлением border-а вынесено в отдельную секцию, что в конечном итоге дает легкую и быструю смену цвета, вам не понадобится рыскать по всему файлу стилей в поисках, где же еще надо править цвет border-а. Имя класса может быть и другим.
.bord {border:1px solid #000;} /* border */
.bordt {border-top:1px solid #000;} /* border-top */
.bordr {border-right:1px solid #000;} /* border-right */
.bordb {border-bottom:1px solid #000;} /* border-bottom */
.bordl {border-left:1px solid #000;} /* border-left */
Проставляя соответствующие классы там, где необходимо получаем нужный результат.
Часто используется Мастером Lasto. Подсмотрено при разборке табличных завалов в Gold Shop-е, и попытке перевести его на не табличное представление. Правда работа еще не закончена, что, в общем-то, связанно с разметкой и имеет прямое отношение к представленному вашему вниманию циклу публикаций.
Известный прием, почему-то всегда о нем забываю, хотя и отметился постом по поводу.
Смотрим примеры. Сравнив html-код и стили трех примеров, вы увидите, что необходимо изменить для получения того или иного варианта отображения блока middle. Стили и html будут или удалены или закомментированы.
Горизонтальный 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 | ||||