Просмотров: 3 034

Верстка CSS. Создаем каркас страницы из одной колонки с header и footer.

Очень часто при разработки сайтов нужно создать простую страницу, которая может состоять из одной колонки с верхней частью (header), содержимым (content) и нижней частью (footer).

Выглядит это примерно вот так:

08-09-2014 5-38-30

Такие страницы часто используются для того, чтобы вывести пользователю какую-либо информацию. Например, что он успешно подписался на рассылку, оформил заказ и.т.д. Часто такие шаблоны используют для того, чтобы создать рекламный текст на какой-либо товар, страницу подписки на рассылку и.т.д.

Создается такой каркас довольно просто. Давайте попробуем это сделать прямо сейчас.

Если вы будете испытывать трудности в его создании, вы можете изучить два моих базовых курса по технологиям HTML и CSS.

Вот ссылки на них:

Базовые знания HTML c НУЛЯ и за 7 дней.

//webgyry.info/base-html-content

Базовые знания CSS c НУЛЯ и за 8 дней.

//webgyry.info/base-css-for-8-day

Начнем с HTML-кода. Для создания такого каркаса страницы нам понадобятся 3 главных блока div:

<div id="header">
 <p>Область заголовка</p>
</div>
<div id="content">
 <p>Область содержимого</p>
</div>
<div id="footer">
 <p>Область нижней части страницы</p>
</div>
Для того, чтобы содержимое можно было выровнять по центру, давайте внутри каждой области добавим еще по одному блоку div.
<div id="header">
<div class="in_header">
<p>Область заголовка</p>
   </div>
</div>
<div id="content">
<div class="in_content">
<p>Область содержимого</p>
   </div>
</div>
<div id="footer">
<div class="in_footer">
<p>Область нижней части сайта</p>
   </div>
</div>

Теперь можно переходить к настройкам внешнего вида и созданию стилей CSS.

#header {
height:100px;
background:#39F;
color:#fff;
padding-top:10px;
}

#content {
padding-top:20px;
}

#footer {
height: 50px;
padding-top:10px;
background:#CCC;
width: 100%;
}

#header .in_header {
width:800px;
margin:auto;
}
#content .in_content {
width:800px;
margin:auto;
}
#footer .in_footer {
width:800px;
margin:auto;
}

08-09-2014 5-32-02

Основной каркас страницы уже появился, но здесь есть две основные проблемы: footer не прижат к низу окна браузера и по границам макета есть нежелательные отступы, которые было бы хорошо убрать.

Давайте это сейчас и сделаем.

Подробнее обо всех изменениях, которые я буду сейчас вносить, можно почитать здесь:

//webgyry.info/footer-to-bottom-page-css

Я лишь добавлю сюда код, который за это отвечает.

* {
margin:0; /*Убираем отступы по краям*/
}
body {
height: 100%;
min-width:900px;
font-family:Cambria, "Times New Roman", serif;
}
html {
position:relative;
min-height:100%;
}

Добавляю нижний отступ к содержимому, чтобы fotter не наезжал на него при недостаточной высоте области просмотра:

#content {
padding-top:20px;
padding-bottom: 100px;
}

И корректирую footer: добавляю свойства CSS, которые и прижмут его к низу окна.

#footer {
height: 50px;
padding-top:10px;
background:#CCC;
position: absolute;
bottom: 0;
width: 100%;
}

Смотрим, что получилось.

08-09-2014 5-38-30

На мой взгляд довольно не плохо.

Скачать страницу можно здесь.

В следующих своих курсах я часто буду ссылаться на эту заметку, чтобы каждый раз не создавать такую страницу заново. Можете сохранить ее к себе на компьютер, так как пользоваться такими шаблонами приходится довольно часто на практике.

Если что-то не получилось, пишите в комментариях, посмотрим.

Вот несколько книг, которые помогут вам разобраться в верстке сайтов и CSS более подробно.

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2