Шапка сайта

Практически любой сайт имеет шапку с логотипом, названием, меню, контактной информацией и другими элементами.

Существуют несколько подходов для оформления шапки. Основные из них: выровненные по центру и на всю ширину страницы.

Раньше шапку оформляли как обычный блок через тег div. С появлением HTML5 рекомендуется использовать тег header. Для создания простейшей шапки достаточно написать такой код:

<header></header>

Займёмся его оформлением. Например, сделаем блок на всю ширину экрана.

header{
    width: 100%;
    background: #F8E4AB;
    height: 70px;
}

Свойство width: 100% растягивает блок на всю ширину вне зависимости от размеров экрана. Если размеры нужно ограничить, то используйте дополнительно свойство max-width.

Иногда высоту опускают, чтобы она определялась автоматически по элементам в её составе.

Шапку можно поместить в общий контейнер.

<div id = "wrap">
<header></header>
</div>

Логотип обычно вставляют как фоновое изображение. Добавим правило:

background: #F8E4AB url(logo.png) no-repeat 5% 50%;

Мы запрещаем повторение логотипа и немного смещаем влево и по центру по вертикали.

Можно добавить заголовок и меню.

<div class = "title">Название сайта</div>
<ul class = "menu">
<li><a href = "#">Контакты</a></li>
<li><a href = "#">О нас</a></li>
<li><a href = "#">Услуги</a></li>
</ul>

Оформление. Можно задать размеры шрифта, убрать маркеры у пунктов меню...

.title{
    font-size: 36px;
    padding-top: 10px;
    text-align: center;
}

.menu{
    list-style: none;
    position: absolute;
    top: 10;
    right: 100;
}

Сместим меню в правый край с помощью абсолютного позиционирования. Чтобы это заработало, нужно также дописать для header правило position: relative;

Если вы хотите зафиксировать шапку, то используйте правило:

position: fixed;

А также используйте правила для позиционирования (top, left, right, bottom).

Реклама