Как сделать хедер по центру
Добавил пользователь Alex Обновлено: 05.10.2024
В прошлой статье мы сделали каркас нашего HTML шаблона, который готов к его заполнению и оформлению. Сегодня я расскажу как красиво сделать шапку сайта (верхнюю часть) и простенькое меню. Также сегодня внесем немного изменений в стили других блоков.
Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:
Первым делом внесем немного изменений в стиль обволакивающего блока wrapper:
Я поставил фиксированную ширину - width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:
Также я внес изменения и в подвал:
Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.
Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:
Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки.
Что? Это всё? И в честь этого названа целая статья?
Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.
Пропишем в код HTML шаблона внутри блока header вот такую строчку:
По сути это ссылка на главную страницу без текста, однако ей присвоен класс . Теперь нужно его оформить в стилях css.
Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в следующей части урока.
Всем, привет. Появляются вопросы об оформлении заголовка блога. Обычно это делается стандартным способом через раздел дизайн. Но это не всегда устраивает, так как в этом случае, загруженное изображение и описание автоматически выравнивается по левому краю.
Вариант, кода вставили картинку с описанием и название блога в разделе дизайн.
Заходим во вкладку шаблон изменить HTML. Находим строку ]]> и над ней устанавливаем следующий код.
Если вы хотите чтобы изображение было во всю ширину шапки, тогда вместо этого, вставьте следующий код. Возможно, в этом случае придётся подкорректировать размеры изображения, чтобы смотрелось аккуратно.
Чтобы описание блога было слева, то пишем это-
При изменениях нажимайте кнопку просмотр, чтобы видеть результат. И если всё нравится - сохранить.
Используя стили можно сделать картинку слева или справа на фоне.
Многие делают шапку для блога в различных редакторах и потом уже сохраняют как картинку в разделе дизайн. Часто появляется вопрос, как узнать ширину и высоту шапки блога.
Подведите курсор на шапку блога и щёлкните правой кнопкой мыши. Выберете опцию ПРОСМОТРЕТЬ КОД. Откроется окно, где в левой части можно увидеть этот размер.
Некоторые начинающие блогеры, когда загружают готовую картинку в разделе дизайн - гаджет HEDER, делают ошибку. Не прописывают название и описание блога. Потому что они не красиво накладываются на изображение. Это не очень хорошо для оптимизации, так как получается, что не название title не описание блога description поисковик не видит. В этом случае оптимальным вариантом будет опять использовать CSS.
Задать прозрачность тексту и указать размер 0.
Если вы уже более или менее разбираетесь в стилях в шаблоне блога , то всё что необходимо можно устанавливать именно там. Стили CSS шапки обычно под этой строкой в шаблоне.
Коль пошла такая тема, позволю себе немного разобрать, что к чему, чтобы понятнее было.
В стандартном шаблоне, шапка блога - это специальный виджет .Header., где по умолчанию имеются вот такие вот контейнеры -
- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - блок названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания;
Обычно в них и добавляются стили CSS.
Используя свойства CSS вы можете кардинально менять внешний вид всего блога.
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
CSS - Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
Браузеры, которые поддерживают данное решение:
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по горизонтали
1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по вертикали
1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.
Сегодня разберёмся как можно сделать в CSS и HTML выравнивание по центру. Мы рассмотрим несколько способов выравнивания текста.
Навигация по статье:
Как выровнять в html текст по центру?
В HTML есть два варианта, которые не предполагают использование CSS.
-
1. Тег
Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.
Когда я открываю исходный код чужого сайта, то за редким исключением, вижу неструктурированный HTML код, непоследовательно написанный CSS и почти нет комментариев. Ориентироваться в таком хаосе, очень сложно и я понимаю, что мне быстрее сделать все заново.
Такой бардак происходит на сайтах, сделанных непрофессионально, поэтому и обращается заказчик с такими шедеврами к фрилансерам. Грамотно сделанные сайты, редко переделывают, потому вероятность наткнуться на плохо сделанный сайт, очень высока.
Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.
У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.
Что бы я изменил в дизайне?
- Шрифт и цвет у логотипа
- Размер и цвет остального шрифта
- Убрать зеленую полосу
- Блок с контактами разместить на верхней панели
Между тегами head в HTML файле:
Делать верстку мы будем на flexbox.
Первый ряд – панель с контактами (top header).
HTML разметка
В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.
Массажный салон для вашего здоровья и красоты
Tel. (+372) 5514704, 58079045
Инфо и запись: ежедневно с 9:00 до 21:00
CSS стили
Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.
Выделим некоторые слова зеленым цветом.
Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.
Второй ряд – шапка (header)
Слева направо, первым идет логотип, а затем навигационное меню.
HTML код
Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.
CSS код
Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.
/* Ширина дочернего блока под логотип */
.wrap-logo width: 30%;
>
Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.
Логотип смотрится свежее, если его сделать двухцветным.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: