как расположить контейнер div по центру экрана

Использование css-хелперов

Наш макет пока не имеет никакого форматирования, поэтому всё, что мы увидим, так это несколько строчек с названиями блоков. Очевидно, что нам нужно задать стили для позиционирования.

Блок контента и блок сайдбара у нас предполагаются в виде float-блоков, именно поэтому после них мы и добавляем div.clearfix.

<div style="clear: both"></div>

Класс clearfix предназначен для подавления float-эффекта. То есть это примерно эквивалентно коду:

Запись div.clearfix - указывает применить к блоку стили определенные классом clearfix. В MaxSite CMS этот класс находится в css-файле default-шаблона. Поскольку мы будем делать свой шаблон по технологии default, то в нашем шаблоне будет доступен как этот класс, так и множество других.

Родительский DIV - это контейнер. Сайдбар и контент мы также помещаем в свой общий блок.

<div>ПОДВАЛ</div>

<div class="clearfix"></div>

<div>САЙДБАР</div>

<div>КОНТЕНТ</div>

<div>ШАПКА</div>

Каждый элемент - отдельный блок. Единственный момент, который не совсем очевиден для новичка - это использование общего контейнера. Любой сайт должен иметь общий контейнер. Иногда встречаются шаблоны, где в качастве основного контейнера используется тэг BODY. На практике это крайне неудобный вариант, поскольку свой блок для контейнера автоматом снимает все вопросы об отступах: как внутренних, так и внешних. Каждый блок - это обычный DIV.

Начальная схема html-кода

Для простоты попробуем сделать макет моего сайта в виде блоков. Такой пример я уже приводил в прошлом уроке. Сейчас рассмотрим как это делается со всеми деталями.

Самый лучший код - это код, написанный собственноручно. Во первых - это единственный способ чему-то научиться. Во-вторых вы не будете слепо копировать то количество «быдлокода», которое часто кочует от шаблона к шаблону.

В целом у нас уже есть все теоретические знания, чтобы приступить к созданию шаблона. Первым этапом должна стать подготовка модульной сетки. Делается это на основе дизайна будущего сайта. Очень часто новичкам советуют изучать код готовых шаблонов и учиться по ним. Я, на основе своей многолетней практики, могу со всей ответственностью заявить, что это крайне порочный совет. Можно иногда подсмотреть html-код дизайна, но только в том разрезе, чтобы уточнить точные размеры каких-то элементов, и не «лазить» по экрану с рулеткой.

Шаблоны для новичков. Урок 6. Модульная сетка. Позиционирование сайдбаров и контента 27 января 2012 г. Просмотров: 3489 »

Как создать свой сайт на MaxSite CMS

Шаблоны для новичков. Урок 6. Модульная сетка. Позиционирование сайдбаров и контента