12 октября 2009

Резиновая верстка на div-ах

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

Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <div id="wrapper"> на процентную. Таким образом, ширина сверстанного сайта будет изменяться в зависимости от размера окна браузера.

В видеоуроке я установил ширину блока <div id="wrapper"> в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов, тогда сайт будет занимать лишь часть окна браузера.

Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.

Выравнивание блоков посередине в случае резиновой верстки на div-ах

Первое, что приходит в голову - это указать у элемента body свойство text-align:center. Казалось бы, все, включая текст на странице, должно выровняться по центру. А уж потом, для элемента wrapper поменять центровку на выравнивание по левому краю (text-align:left). Но это неверный подход (хотя все сработает в IE). В нормальных браузерах свойство text-align устанавливает выравнивание только для текста внутри блока, к которому применяется данное свойство.

Правильным будет указать равные левый и правый внешние отступы для элемента <div id="wrapper"> и значение их — auto. Если левый и правый отступы равны, то элемент выравнивается посередине.

CSS-инструкция для блока wrapper будет иметь такой вид:

margin-left: auto;
margin-right: auto;

Или в сокращенной форме:

margin: 0 auto; 

Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя.

Хозяйке на заметку: блок, сформированный тегом <div>, по умолчанию растягивается на всю ширину родителя (несмотря на ширину контента внутри этого блока). Поэтому у новичков часто случается шок от того, что центровка не происходит. Они начинают судорожно чесать в затылке и пытаться понять, почему правильно заданный margin не дал желаемого результата.

Естественно, никакой центровки вы не добьетесь, т.к. границы центруемого блока уперлись в границы родителя. Ширина контейнера <div> становится равной ширине содержимого только в случае задания этому контейнеру свойства float:left .

В случае директивы float:left (или float:right) , опять-таки, никакого выравнивания при помощи вышеописанного способа вы не добьетесь. Блок, с данной директивой, прилипнет своим левым краем (или правым) к родителю, а все остальные блоки нормального потока будут обтекать его справа (или слева).

Поэтому ограничивайте ширину блока свойством width (либо фиксированная ширина в пикселах, либо проценты) и, для понимания происходящего на странице, обводите блок border-ом. Например вот так:

border: 1px solid black;

В этом случае вы будите четко видеть границы верстаемого блока. Но помните, что в нормальных браузерах к размеру блока прибавится размер border-а (ненормальным оказывается браузер IE, в котором размер border-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки.

А теперь переходите к просмотру видео.

О чем же пойдет речь в данном видеоуроке:

  1. При помощи сайта http://csstemplater.com/ сформируем HTML-каркас верстки.
  2. Детально рассмотрим свойства, обнуляющие параметры, заданные в браузере по умолчанию. Эти свойства носят подпольную кличку «ластик». Очень вам советую применять ластик во всех ваших проектах, чтобы не ломать голову вопросом «почему искажается верстка, если в HTML и CSS все задано правильно». В нашем случае ластик будет иметь весьма развитый вид.
  3. Познакомимся с такими интересными свойствами CSS как outline и псевдокласс-модификатор :focus. Outline позволяет задать обводку блока без изменения его размеров. Псевдокласс :focus позволяет изменить внешний вид элемента, при передаче ему фокуса ввода. Жаль, но все эти замечательные свойства поддерживаются браузером IE начиная лишь с 8-й версии.
  4. Детально обсудим один из способов прижатия футера к нижней части окна браузера.
  5. Разберемся с принципами формирования основного содержимого сайта: установка левого и правого сайдбара, задание области основного содержимого сайта.

Видео с сервиса RuTube:

Первая часть видео с сервиса YouTube:

Вторая часть видео с сервиса YouTube:

Третья часть видео с сервиса YouTube:

Если хотите попрактиковаться, то можете скачать исходник верстки с Deposit Files (*.zip-архив 3.5 КБайт).

Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве (*zip-архив с *wmv-файлом. Размер 53.9 МБайт).

С уважением, Андрей Морковин.