Footer всегда внизу. Личный архив По центру. Ширина центрируемого блока неизвестна Комплект шаблонов
Trifler Blog
Footer всегда внизу. Личный архив
Решил посвятить несколько часов на приведение в порядок своего архива. Обнаружилась масса забавных, порой курьезных вещей. Натолкнулся на давно брошенную и не завершенную разработку, уж и не знаю, из каких краев попал ко мне оригинал шаблона. Честно скажу, даже и не вспоминал, что несколько лет назад предпринимал попытки наиболее оптимального решения проблем разметки страницы.
Естественно, все планы относительно раскладывания архива по полочкам (папкам) были заброшены до лучших времен.
Тут сыграло свою роль и то обстоятельство, что поиск легкой, прозрачной без лишних контейнеров, разметки страницы продолжается. К этому подталкивает и работа с людьми, которым премудрости html и стилей, в общем-то, и не нужны.
Нет, в своих областях они разбираются досконально, но тонкости, нюансы, скажем так, проблем визуальных разночтений в браузерах, имеют место быть.
Вообще, общение с кругом лиц, напрямую занимающимися продвижением, SEO, которые конкретно зарабатывают деньги в этой области, имеет свои положительные моменты. Начинаешь более отчетливо понимать, что контент расположенный выше колонок навигации в html-коде - очень хорошо, минимум самого html-кода разметки и прилагающегося к нему файла стилей так же есть плюс несомненный.
Вот кратенький не хитрый список, сложившийся в процессе работы над разными проектами:
- Нет таблицам
- Контент распологается выше всего, исключение только header
- Иллюзия (по привычке так пишу) одинаковой высоты колонок
- Индивидуальный background-color или background:url(..) любой колонке
- Разделительные вертикальные линии (border) между колонками - по выбору
- Область контента резиновая, регулируемый параметр
- Наличие блоков, ширина которых больше заданных размеров области контента, не должно приводить к падению колонок навигации, часть их обрезается или будет обрезана при уменьшении размеров окна браузера, обычно справа
- footer всегда внизу- не обязательное условие
Как видим, ничего особенного. Но не даром первым пунктом идет "нет таблицам".
Ну и пункт под номером восемь. Бедный footer, который всегда внизу, что же ты, так всех достал-то? Но если это кому-то нужно, то только для вас и только здесь и сейчас.
О попытках, так или иначе, собрать все воедино, а многие пункты списка прямо или косвенно противоречат друг другу, не однократно рассказывалось на страницах блога.
Вернемся на круги своя. Практика html and css рулит.
html-код:
<body>
<div id="wrap">
<div id="header">...</div>
<div id="center">
<div id="content">...</div>
<div id="left">...</div>
<div id="right">...</div>
</div>
</div>
<div id="footer>...</div>
</body>
Комментарий:
Мне нравится :)
Признайтесь честно, сколько раз вы встречали нечто подобное? Пора заучить наизусть :)
Согласитесь, принцип "необходимо и достаточно" выдержан в полной мере.
css
А, никаких пояснений к стилям не предусмотрено. Там не без хитростей, но пытливому уму все подвластно.
Смотрим – стандартный трех колоночный макет. F11 вам в помощь.
Общий комментарий:
У каждого браузера свои тараканы :)
IE6(7) – наличие вертикальной прокрутки имеется, особенно заметно в IE6. Без костылей для него не обошлось, но бороться с ним в данном случае не стал, не долго ему осталось.
FireFox, OPERA. Думаете у них все в порядке? А вот и не угадали, не надо тешить себя иллюзиями, что у браузеров проходящих самые навороченные тесты, с простыми вещами все в порядке. Если область контента пустая, они преподнесут вам "приятный" сюрприз.
Поклонники самых крутых без всякой меры "машинёнок", примите мои самые искренние соболезнования, скорблю вместе с вами :(
P.S. Двух колоночная разметка с разным расположением колонок под навигацию, домашнее задание для любителей поломать голову.
По центру. Ширина центрируемого блока неизвестна
Продолжение темы поднятой в Вертикальное/горизонтальное центрирование элементов в блоке
Все предложенное там носило весьма специфичный характер. На то были свои причины. В этот раз задача чуть проще - нет необходимости центрировать по вертикали.
Определим условия нашей задачи.
- Центрируемый блок с неизвестной шириной (явного указания width нет)
- Он же обычный блок, но может иметь стилевое правило float (к примеру, горизонтальное меню)
Собственно говоря, в меню все и дело. Занимаясь проблемой интеграции горизонтального меню с вложениями в скрипты Мастера Lasto, по вполне понятным причинам захотелось сделать меню с неизвестной заранее шириной, строго по центру. При добавлении новых ссылок меню просто раздвигается, визуально оставаясь отцентрированным.
Решений данной задачи хоть пруд пруди, но всегда, что-то не устраивает, оно и понятно. Не изобретая велосипед, замечу иногда мне легче самому, что-либо сделать с нуля, чем разбираться в чужом, может быть вполне достойном для подражания примере.
Тем более, что подобный прием использовался мной по приведенному выше линку.
Итак.
Скриншот. Не нужные подробности типа боковых колонок отпускаем.
Блок, в котором находится меню (контейнер), по ширине ограничен только самой страницей.
Переходим к оформлению.
css
.menucenter {
background:#e6eaff;
border:#0dd 1px solid;
margin:10px;
height:30px;
}
.centermenu {float:left;position:relative;left:50%;}
.cenmenu {position:relative;left:-50%;}
*html .cenmenu {float:left;}
html
<div class="menucenter">
<div class="centermenu">
<div class="cenmenu">
Меню (контейнер) с float
</div>
</div>
</div>
Как видим, ничего сложного.
Теперь нюансы.
Если у центрируемого блока (меню) имеется стилевое правило float, применяем без затей - один в один.
Если оно не используется, то из таблицы стилей удаляется строка *html .cenmenu {float:left;}
Замаскировав background-color: меню (контейнера) под фон, на котором меню (контейнер) располагается, в стилях убиваем .menucenter и соответственно в html-коде удаляем ставший не нужным контейнер c классом "menucenter".
Итого – две-три строчки стилевых правил, да пара-тройка дополнительных блоков решает поставленную задачу. Жаль, но на сегодняшний день другие средства для подобных целей отсутствуют.
Комплект шаблонов
Предлагаю вашему вниманию четыре макета. В них реализованы следующие возможности:
- Эмуляция max/min-width and min-height без expression для IE6. Все блоки, в том числе графика, фото, находящиеся в области контента и имеющие фиксированный размер по ширине больше определенного вами min-width, при уменьшении размеров окна браузера будут обрезаны справа, в любом случае это не приведет к нарушению разметки страницы.
- Иллюзия одинаковой высоты колонок. Не зависимо от наполнения информацией любой из них, все колонки всегда автоматически выравниваются по высоте, что дает возможность каждой колонке задать свой background-color: или background:url(...). Может быть, это кому-то покажется необязательным, но иметь лишний козырь в рукаве никогда не помешает.
- Контент выводится раньше колонок навигации, что при включенных/отключенных стилях дает преимущество с точки зрения 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, чтобы более четко отделить область контента от колонок отведенных под меню.
Смотрим:
Естественно, а комплект шаблонов адаптирован под разрешение 1024*768, но по моей личной статистике потихоньку начинает преобладать 1280*ХХХХ, вы можете скомпенсировать визуальные разночтения при переходе с одного разрешения к другому используя скрипт предложенный Мастером Lasto и описанный мной в position:absolute; Ликбез.
Для скачивания zip-архива совершите "маленький хадж", Мастер простите за плагиат :) на специальную страницу, она создана с целью узнать статистику, насколько востребованным окажется предложенный вам материал.
P.S. Наиболее полно использование комплекта шаблонов проявляет себя в новой редакции "Lasto nano-CMS engine". Для каждой вложенной папки внутренних страниц данного скрипта, можно легко и непринужденно задать собственную разметку с соответствующим оформлением. Насколько это будет востребовано и необходимо, решать поклонникам цифровых продуктов Мастера, но такая возможность существует, и надеюсь, придаст толику разнообразия вашим ресурсам.
P.P.S. Посмотреть один из вариантов практического применения на основе скритпта "Lasto Blog", можно на созданном мной специальном ресурсе, посвященного проблемам верстки и не только.
Горизонтальный banner counters.php - width:494px;