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

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

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

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

2016-12-07

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 сформируем резиновое меню, которое может сжиматься и растягиваться в установленных пределах.

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

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

    Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 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; /* Сдвигаем картинку вниз */ }

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

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

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

    Super Bad First LinkSecond LinkThird 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; } }


    Результат:


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

    Итак, вот что мы получим в конце урока:

    Я выбрал тему рыбалки, потому что она мне очень близка и соответственно приятно что либо делать. Графику естественно я заготовил заранее в фотошопе, все сверсвтал и нарезал, как я это делал я вам не буду объяснять, так как это отдельная тема, а в этом уроке я покажу вам как это все реализуется непосредственно в коде, поэтому перейдем ближе к делу.

    Вот общая картина того как выглядит эта шапка в html:




    Рыбалка





    НовостиКрючкиУдочкиЛескаО проекте



    #header {
    width: 100%;
    height: 157px;
    background: url(bg.jpg);
    }
    #links {
    width: 100%;
    height: 33px;
    background:url(linkbg.jpg);
    font-size: 14px;
    font-weight: bold;
    color:#FFFFFF;
    }
    #links div {
    padding: 5px;
    text-align:center;
    width: 150px;
    float: left;

    }
    .text {
    color: #FFFFFF;
    padding: 10px;
    font-size: 24px;
    float: left;
    }
    h1 {
    margin: 0px;
    padding: 0px;

    font-size: 50px;
    font-weight: bold;
    color: #FFFFFF;
    }

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

    Тег тела документа, здесь мы сразу обнуляем все возможные отступы от краев окна браузера и внутри самого тега body, соответствующими параметрами margin:0px; padding: 0px; это нам необходимо для того чтобы не было белых пробелов по краям окна браузера, да и в принципе это применяется всегда при любой нормальной верстке сайта.

    Это у нас начало шапки мы создаем контейнер с заданными параметрами:


    #header {
    width: 100%;
    height: 157px;
    background: url(bg.jpg);
    }

    а именно первым делом задаем ширину шапки в процентах width: 100%; что дает нам возможность создать так называемую резиновую верстку, затем высоту height: 157px; и соответственно фоновый рисунок background: url(bg.jpg); который лежит у нас в той же папке что и файл шапки. Следующим делом нам необходимо создать три контейнера внутри данного, для того чтобы разместить там рисунки и текст:


    Рыбалка
    Рыбачьте с нами и поймаете...


    Первому контейнеру мы задаем выравнивание к левой части чтобы он соответственно был слева, для этого мы используем параметр позиционирования float: left; и просто вставляем туда наше изображение, размер контейнера будет определяться размером изображения. Следующий контейнер мы так же выравниваем с помощью параметра float чтобы он у нас был на одной линии и не перешел на следующею строчку. Здесь мы используем класс class="text":

    Text {
    color: #FFFFFF;
    padding: 10px;
    font-size: 24px;
    float: left;
    }

    В первую очередь задали цвет шрифта color: #FFFFFF; отступы от текста внутри контейнера padding: 10px; размер шрифта font-size: 24px; и выравнивание в лево. Так же в данном контейнере присутствует тег которому, так же отдельно прописали параметры:

    h1 {
    margin: 0px;
    padding: 0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #FFFFFF;
    }

    Первым делом мы убрали все возможные отступы margin: 0px; padding: 0px; далее задали шрифт font-family:Verdana, Arial, Helvetica, sans-serif; размер шрифта font-size: 50px; вес шрифта font-weight: bold; и цвет color: #FFFFFF; вот и все. Остался последний третий бокс который мы выравниваем в право, так же параметром float для того чтобы как и в прошлый раз он был на одной строчке и вставляем второй рисунок. Если у вас возникли затруднения с понятием свойств параметра float советую прочитать урок «CSS позиционирование основные моменты» и вам все станет ясно. На этом наша верхушка закончена, остался блок ссылок:


    НовостиКрючкиУдочкиЛескаО проекте

    Итак, делаем полосу с фоном:

    #links div {
    padding: 5px;
    text-align:center;
    width: 150px;
    float: left;
    border-right: 1px solid #000;
    }

    Для красоты отображения делаем отступы в 5 пикселей по всем сторонам padding: 5px; затем выравниваем содержимое контейнеров по центру text-align:center; задаем ширину width: 150px; выравниваем сами контейнеры к левому краю, и осталось только разделить наши ссылки с помощью элементарной обводки краев контейнера справа, а именно border-right: 1px solid #000; мы задали обводку границы справа, полосой шириной в 1 пиксель, стиль solid и цвет черный.

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

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

    Дата публикации:2011-10-11