Создать однотонную шапку пошаговая инструкция css. Шапка страницы. Шапка страницы Адаптивная шапка

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

Как обычно это, оказывается, делается в минимум строк кода и очень просто, и в то же время очень эффективно. Ну а теперь давайте приступим к уроку.

Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём.

Ι HTML

HTML код очень и очень простой, нам просто нужно задать теги для , и далее между ними написать содержимое сайта:

Прикреплённая шапка сайта

Так как это самый простой пример, тут мы добавили просто текст между тегами h1, но там также можно использовать изображения, или же, например, навигацию по сайту.

Код jQuery

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

Когда значение положения страницы при прокрутке больше чем 1, это означает, что пользователь прокрутил страницу и нужно добавить класс «sticky» к тегу шапки сайта. Таким образом срабатывает и фиксируется шапка сайта.

А вот и сам код:

$(window).scroll(function() { if ($(this).scrollTop() > 1){ $("header").addClass("sticky"); } else{ $("header").removeClass("sticky"); } });

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

CSS

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

Header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans", sans-serif; }

Теперь самый интересный момент: когда пользователь прокручивает страницу вниз, тогда будет применяться класс.sticky, которому мы можем задать совершенно разнообразное отображение, на которое только способно CSS. Мы так же установим фиксированную позицию, что бы наша шапка сайта была всегда на виду.

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

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

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

Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже - около 15 Кб. Можно разбить фон на две составные части - градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

Использовать формат PNG-24 при сохранении прозрачности.

Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков - изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Пример 6.14. Шапка сайта

HTML5 CSS 2.1 IE Cr Op Sa Fx

Как поймать льва в пустыне? body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* Градиент */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* Животные */ height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

2016-12-07

Оформляем элементы шапки сайта стилями CSS

Здравствуйте уважаемый посетитель!

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

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

Размещение элементов по вертикали
Формирование отступов элементов по горизонтали
Назначение свойств шрифта элементов
Создание теней для текстовых элементов
Исходные файлы сайта

Формирование элементов шапки

В соответствии с разметкой веб-страницы, шапка разделена на две основные части. Первая - это область, где располагаются фавикон, заголовок названия сайта и ключевая фраза, которые объединены элементом с классом "hdr-title" . Вторая часть - меню, образованое элементом с классом "menu" .

Меню мы оставим для следующей статьи, а сейчас рассмотрим элементы: фавикон, заголовок названия сайта и ключевую фразу.

Ниже, приведен фрагмент шапки HTML-страницы, взятый из файла "index.html", с содержимым контейнера , где цветом выделены нужные элементы.

"images/logo.gif" alt ="Фавикон" />

Название сайта

Противоугонная маркировка стекол -

надежная защита автомобиля от угона

Рис.1 Фрагмент кода шапки HTML-страницы

Как видно из таблицы, фавикон и заголовок названия сайта объединены в один блок с атрибутом класса "hdr-block" , а два фрагмента ключевой фразы размещены в отдельные блоки

Один с классом "hdr-p1" , другой "hdr-p2"

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

В итоге, получим следующие данные:

расстояние до блока с классом "hdr-title" - 28px;
расстояние до нижней границы фавикона - 55px;
расстояние до блока
С классом "hdr-p1" - 74px;
расстояние до верхней границы эл-та
С классом "hdr-p2" - 105px;
расстояние до нижней границы эл-та
С классом "hdr-p2" - 160px;

Исходя из этого, вычислим высоту элементов:

высота фавикона - 27px (55px - 28px);
высота блока с классом "hdr-block" - 46px (74px - 28px);
высота блока
С классом "hdr-p1" - 31px (105px - 74px);
высота блока
С классом "hdr-p2" - 55px (160px - 105px);

На основании этих данных назначим соответствующие стили.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

Hdr-p1 {

height: 31px;

Hdr-p2 {

height: 55px;

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

Ниже, на рис.4 показан вид шапки до назначения свойств CSS, на рис.5 - после назначения.

Рис.4 Вид шапки до назначения свойств CSS

Рис.5 Вид шапки после назначения свойств CSS

Однако, расположение фавикона и заголовка названия сайта, которые размещены в блоке с классом "hdr-block" , пока не соответствуют макету (на макете они располагаются в один ряд, здесь же заголовок находится под фавиконом).

Это происходит из-за того, что по умолчанию элементы располагаются один под другим по мере загрузки HTML-страницы.

Устранить это несоответствие можно довольно простым способом, назначив для фавикона img всего лишь одно свойство float , которое сделает его плавающим, сместит в нужную левую сторону родительского элемента и позволит строчному содержимому , расположиться за ним в одну линию.

О свойстве float очень хорошо объясняется в справочнике "Puzzleweb" на странице "http://www.puzzleweb.ru/css/pr_float.php" . Поэтому, если кто еще не знаком этим важным свойством CSS, то может воспользоваться данной ссылкой.

Как назначить в данном случае свойство float показано ниже.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

Hdr-p1 {

height: 31px;

Hdr-p2 {

height: 55px;

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

Формирование отступов элементов по горизонтали

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

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

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

В результате, мы получили следующие значения:

отступ фавикона - 100px;
отступ заголовка - 145px;
отступ блока
С классом "hdr-p1" - 196px;
отступ блока
С классом "hdr-p2" - 243px.

Исходя из того, что общая ширина страницы дизай-макета составляет 1200px, подсчитаем процентное соотношение измеренных величин по каждому элементу:

отступ фавикона - 8.33%;
отступ заголовка - 12.08%;
отступ блока
С классом "hdr-p1" - 16.33%;
отступ блока
С классом "hdr-p2" - 20.25%.

На основании этих данных присвоим полученные значения соответствующим свойствам элементов.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.25%;

Hdr-block h1 {

margin-left: 12.08%;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

После изменения CSS-кода мы можем убедиться, что все отступы элементов приведены в соответствие с дизайн-макетом.

Назначение свойств шрифта элементов

Теперь назначим свойства шрифта рассматриваемых элементов, а именно: размер, цвет и стиль.

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

В данном случае, шрифт заголовка имеет следующие значения:

стиль - стандартный (не курсивный, нежирный);
размер - 2.25em = 36px / 16px;
цвет - #c03838.

Аналогично, определяем параметры шрифта для элемента ключевой фразы:

шрифт "Arial" из семейства шрифтов без засечек;
стиль - курсивный, нежирный;
размер - 1.5em = 24px / 16px;
цвет - #437744.

Теперь, присвоим полученные значения соответствующим свойствам.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 31px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.33%;

Hdr-block h1 {

margin-left: 12.08%;

font-size: 2.25em;

color: #c03838;

line-height: 0.8;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

Hdr-p1, .hdr-p2 {

font-style: italic;

font-size: 1.5em;

color: #437744;

line-height: 0.8;

По назначенным свойствам шрифта следует сделать некоторые уточнения:

шрифт "Arial" назначен ранее при установке базовых настроек файла css, поэтому здесь, повторного его назначения не требуется;
значение normal стиля font-weight для элемента здесь не указывается, так как оно установлено также в базовых настройках файла css, а для блока
Это значение установлено по умолчанию;
Для того, чтобы верхнюю границу текста совместить с верхней границей родительского элемента свойству line-height присвоено значение 0.8 . Таким образом, межстрочный интервал становится равным размеру текущего шрифта.

После обновления страницы можно увидеть нужные изменения в шрифте текста.

Создание теней для текстовых элементов

И, последнее, что осталось для оформления шапки, это создание теней для текста.

В CSS3 для формирования теней текста имеется свойство text-shadow , в котором задаются значения вертикального и горизонтального смещения, размытость и цвет.

Чтобы получить необходимые данные о параметрах теней снова обратимся к дизайн-макету. Ниже, на примере тени заголовка названия сайта, показано как получить эти данные. При этом, как открыть панель "Стиль слоя" было показано ранее в предыдущих статьях рубрики в части, касающейся создания дизан-макета.

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

угол - 157 o ;
смещение - 3px;
размер - 3px;
цвет - #564949.

Из них можно получить необходимые для CSS значения смещения тени, а именно: смещение по горизонтали 3px, а по вертикали - 1px. Таким образом, получим для свойств CSS следующие значения:

смещение по-горизонтали - 3px;
смещение по-вертикали - 1px;
размытость - 3px;
цвет - #564949.

Аналогично, получим данные по тени для ключевой фразы.

смещение по-горизонтали - 2px;
смещение по-вертикали - 1px;
размытость - 2px;
цвет - #298384.

После назначения соответствующих свойств получим окончательный вариант таблицы стилей CSS

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.33%;

Hdr-block h1 {

margin-left: 12.08%;

font-size: 2.25em;

color: #c03838;

line-height: 0.8;

text-shadow: 3px 1px 3px #564949;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

Hdr-p1, .hdr-p2 {

font-weight: bold;

font-style: italic;

font-size: 1.5em;

color: #437744;

line-height: 0.8;

text-shadow: 2px 1px 2px #298384;

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

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

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .

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

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

А тем, кто не владеет этим редактором, я предлагаю самый простой способ , в имеющимся на всех 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 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст.

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

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

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

Документ без названия

#wrapper {
width : 900px ;
outline : 1px solid #787274 ;
padding : 10px ;
margin : 0 auto ;
}
#header {
width : 900px ;
height : 200px ;
background-color : #25B33f ;
margin-bottom : 10px ;
background-image : url(images/i8.png)
}
#sidebar {
background-color : #2FF553 ;
margin-bottom : 10px ;
width : 180px ;
padding : 10px ;
float : right ;
}
#content {
background-color : #9EF5AF ;
margin-bottom : 10px ;
width : 670px ;
padding : 10px ;
}
#footer {
height :80px ;
background-color : #41874E ;
margin-bottom : 10px ;
}
.clear {
clear : both ;
}
h1 {
color : #ffee00 ;
font : 40px Georgia ;
margin-left : 300px ;
}
h3 {
width : 200px ;
color : #ffee00 ;
font-style : italic ;
margin : 70px 0 0 30px ;
}

Шапка сайта
Как сделать шапку для сайта с заголовком и описанием

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.

А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.

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

http://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png ">

В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png); , и прописываем position: relative .

А в селекторах тегов h1 и h3 , прописываем свойство position: absolute; .

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

#header {
width : 900px ;
heigh t: 200px ;
background-color : #25B33f ;
margin-bottom : 10px ;
position :relative ;
}
h1{
position : absolute ;
color : #ffee00 ;
font : 40px Georgia ;
left : 300px ;
}
h3{
position : absolute ;
width : 200px ;
color : #ffee00 ;
font-style : italic ;
top : 70px ;
left :30px ;
}

Всё остальное остаётся без изменения.

Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

На WordPress устанавливается готовая тема, с готовой шапкой, но допустим, Вам захотелось в эту готовую шапку, добавить какой нибудь свой логотип, или ещё какое изображение.

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php .

В этом файле, находим строку , и после неё вставляем скопированный код картинки.

После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта.

Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img , добавляем атрибут style со свойством margin

style ="margin:0 0 0 0; "

И двигаем изображение туда, куда нам нужно.

Вот мы и создали первую страницу сайта. После доработки шапки, и ещё кое каких доработок, описанных далее, можно этот файл назвать index.html , и выложить его на хостинг. Затем, по этому же шаблону, создаются другие страницы, создаётся меню и так далее. И сайт начинает свою жизнь в интернете.

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье

Желаю творческих успехов.

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

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

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

Super Bad First Link Second Link Third Link

Высота шапки фиксированная, добавляем 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; } }

Результат: