Основная часть



Влад Мержевич

В этой части страницы располагается контент в белой рамке с декоративными границами, а также градиент, с которого мы и начнём.

Градиент

Вначале подготовим изображение градиента в графическом редакторе. Рисунок имеет высоту 457 пикселов и состоит из плавного перехода от цвета #f9db94 (сверху) до #f9f2e3 (снизу). Сам градиент с указанием цветов представлен на рис. 6.8.

Градиент для основной части

Рис. 6.8. Градиент для основной части

Содержание на каждой странице может быть разным, соответственно высота основной части также варьируется, поэтому сделать градиент с учётом высоты проблематично. Пойдём на хитрость и установим цвет фона основной части как #f9f2e3, т.е. совпадающим с нижним цветом градиента. Получится, что цвет от тёмного оттенка плавно переходит в цвет фона.

.content-gradient {
 background: #f9f2e3 url(images/content-gradient.png) repeat-x;
}

Здесь цвет и фоновый рисунок установлен через универсальное свойство background, оно же указывает повторение фона по горизонтали.

Декоративная рамка

Для центральной части требуется подготовить фоновое изображение с декоративными границами. Оно должно иметь ширину 760 пикселов и содержать прозрачные участки для наложения на градиент (рис. 6.9). В качестве графического формата лучше всего подойдёт PNG-24.

Фоновая картинка для создания границ

Рис. 6.9. Фоновая картинка для создания границ

В стилях указываем ширину макета, выравнивание по центру и фон с повторением по вертикали.

.content-bg {
 width: 760px; /* Ширина макета */
 margin: auto; /* Выравнивание по центру */
 background: url(images/content-bg.png) repeat-y; /* Фон с границами */
}

Текст добавлять пока нельзя, потому что не определены поля (padding), так что текст будет накладываться прямо на границу. В принципе, ничего не мешает включить их для слоя content-bg, подкорректировав ширину, но надо принять во внимание вот какой момент. Белый цвет фона получается путём вставки фонового рисунка и у пользователя, отключившего показ изображений в браузере, никакого белого фона не будет. Надо бы предусмотреть такую ситуацию и добавить ещё один слой, у которого будет белый цвет фона, необходимые отступы и поля.

.content-white {
 background: #fff; /* Белый цвет фона */
 margin: 0 11px; /* Отступы по горизонтали */
 padding: 20px 40px; /* Поля */
 text-align: justify; /* Выравнивание по ширине */
}

Значение margin подобрано, исходя из ширины «зубчиков» границы, padding же по желанию. Заодно добавлено выравнивание текста по ширине. Окончательный код показан в примере 6.15.

Пример 6.15. Основная часть страницы

<div class="content-gradient">
 <div class="content-bg">
  <div class="content-white">
   <p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по 
      созданию своего ресурса и его публикации в Интернете. Поскольку 
      любой сайт должен содержать полезную или интересную информацию, мы 
      выбрали тему ловли льва в пустыне, которая будет, без всяких сомнений, 
      полезна любому посетителю. Так, на всякий случай.</p>
  </div> 
 </div>
</div>

Свойство text-align наследуется, поэтому не имеет значения, к какому слою оно добавляется.

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.