Фиксированный шаблон с одной колонкой

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

Создайте на рабочем столе отдельную папку для фиксированного макета с одной колонкой, назовите ее fix1.

Создайте в этой папке два файла: index.html и style.css.

В файле index.html запишите следующий код:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Фиксированный шаблон с одной колонкой</title>
</head>
<body>
    <div id="wrap">

    </div>
</body>
</html>

Здесь блок с идентификатором wrap будет служить контейнером для шапки, контентной части и подвала. Давайте допишем эти блоки:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Фиксированный шаблон с одной колонкой</title>
</head>
<body>
    <div id="wrap">
        <!--Шапка-->
        <div id="header">

        </div>
        <!--Контент-->
        <div id="content">

        </div>
        <!--Подвал-->
        <div id="footer">

        </div>
    </div>
</body>
</html>

Перед каждым блоком я добавила комментарий для удобства чтения кода.

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Фиксированный шаблон с одной колонкой</title>
</head>
<body>
    <div id="wrap">
        <!--Шапка-->
        <div id="header">
            <p>Шапка</p>
        </div>
        <!--Контент-->
        <div id="content">
            <p>Контент</p>
        </div>
        <!--Подвал-->
        <div id="footer">
            <p>Подвал</p>
        </div>
    </div>
</body>
</html>

Сохраните изменения.

Переходим к файлу со стилями. Сперва сбросим все отступы:

* {
    margin: 0;
    padding: 0;
}

Теперь запишем свойства для блока с идентификатором wrap:

#wrap {
    width: 980px;
    margin: 0 auto;
}

Свойство margin со значением 0 auto необходимо для того, чтобы блок располагался по центру веб-страницы. Данное свойство работает только в том случае, если для блока указана ширина.

Для шапки и подвала укажем высоту:

#header {
    height: 100px;
}

#footer {
    height: 50px;
}

Чтобы выделить каждый блок цветом, давайте допишем свойство background-color для следующих селекторов:

body {
    background-color: #f5f5f5;
}

#wrap {
    width: 980px;
    margin: 0 auto;
    background-color: white;
}

#header {
    height: 100px;
    background-color: #ddd;
}

#footer {
    height: 50px;
    background-color: #ddd;
}

Сохраните изменения и откройте файл index.html в браузере.

Не хватает отступов внутри блоков. В файле index.html содержимое блоков заключим между тегами <div> с классом content. Пример для шапки:

<div id="header">
    <div class="content"><p>Шапка</p></div>
</div>

В файле со стилями для этого класса добавим отступы при помощи свойства padding:

.content {
    padding: 15px;
}

Как прибить подвал к низу страницы?

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

  1. Для селекторов html и body нужно указать высоту, равную 100%: 
    html,
body {
    height: 100%;
}
  2. Для селектора #wrap установить минимальную высоту min-height: 100%;, а также относительное позиционирование position: relative;: 
    #wrap {
    width: 980px;
    margin: 0 auto;
    background-color: white;
    min-height: 100%;
    position: relative;
}
  3. Для подвала нужно установить абсолютное позиционирование position: absolute;, отступ снизу bottom: 0;, и ширину блока width: 100%;: 
    #footer {
    height: 50px;
    background-color: #ddd;
    position: absolute;
    bottom: 0;
    width: 100%;
}

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

Если вы уменьшите высоту окна браузера, то заметите, что подвал наезжает на содержимое блока с идентификатором <div id="content">, чтобы этого не было, добавим для последнего отступ снизу равный высоте подвала, т.е. 50px:

#content {
    padding-bottom: 50px;
}

Шаблон готов. Результат работы в браузере можно посмотреть здесь, код CSS для данного шаблона представлен здесь.

Видео к уроку

Поделиться с друзьями:

Комментарии