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

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.

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

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

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

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

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:

Header::after { content: ""; display: inline-block; width: 100%; }

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header :

CSS-код

header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

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

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;} header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ""; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }

В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта

Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе.

А тем, кто не владеет этим редактором, я предлагаю самый простой способ , в имеющимся на всех Windows по умолчанию Paint.

Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение

Как только картинка будет готова, и размещена в папке images , возьмём , созданный на предыдущей странице, и приступим к установке шапки на сайт.

В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.

#header {
width : 900px ; - ширина
height : 200px ; - высота
background-color : #25B33f ; - фон
margin-bottom : 10px ; - отступ снизу
}

Затем вставляем саму картинку.

#header {
width : 900px ;
height : 200px ;
background-color : #25B33f ;
margin-bottom : 10px ;
background-image : url(images/i8.png) - картинка
}

Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство

Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id="header" , и в нём два заголовка h1 и h3 , в которые и вставляем название сайта и его описание

Посмотрим, что у нас получается.

Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:

Для h3 зададим ширину в 200 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст.

Посмотрим результат.

По моему, очень даже симпатично.

Обобщим код этой страницы.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок