Размер шапки сайта

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

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

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

Размер картинки больше чем размер шапки
Всем привет!ребята,у меня размер картинки больше чем высота шапки.как мне сделать так чтобы.

Размер шапки
Привет, у меня в шаблоне проблемы с отображением шапки. Шапка имеет ширину 1774px, а в шаблоне.

динамический размер шапки
Здравствуйте! Я неопытный верстальщик, сайт делаю для своих нужд. Помогите разобраться с такой.

2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
Можно залить сплошным цветом див.

1 2 3 4

header { background: url('если нужно фоновая картинка') red; width:100%; }

Регистрация: 01.12.2009
Сообщений: 238
Я просто хочу в фотошопе шапку нарисовать.А без заливки фонов еще есть какие варианты?
Cyber-Tracing
346 / 71 / 3
Регистрация: 27.04.2009
Сообщений: 554

Сообщение от Stenl1

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

это вам нужна резиновая шапка, а значит делайте так как показал Dimedrol.
633 / 376 / 7
Регистрация: 25.05.2010
Сообщений: 1,372

Если фиксированный размер по ширине, то обычно 1000px или 960px с учетом Оперы.
А резиновую делают часто с рисунком, переходящим в заливку. Может быть один рисунок или два по краям.

1 2 3

header { background: url('если нужно фоновая картинка') red; width:100%;

Куда вставлять этот код??
13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Не работает размер шапки header
Ребятки, я только приступила к изучению CSS, знаний пока маловато, но пытаюсь что-то начать.

При уменьшении окна браузера уменьшается размер шапки и футера
Здравствуйте! У меня есть сайт.

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

Оформление шапки сайта
Пытаюсь сделать сайт на битрикс и не получается реализовать такую шапку. Пробовал через.

Или воспользуйтесь поиском по форуму:

Как сделать шапку сайта фиксированной и изменяющей размер

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

Реализация

Для начала нам нужна HTML-структура наподобие следующей:

 
 
 
LOGO
  
 
 

Код CSS, приведенный ниже – это базовые стили заголовка.

.header < width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #3b8dbd; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; >.header h1#logo < display: inline-block; height: 150px; float: left; margin-left: 50px; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; >.header nav < display: inline-block; float: right; margin-right: 50px; >.header nav a < line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; >.header nav a:hover < color: white; >.header.smaller < height: 75px; >.header.smaller h1#logo < width: 150px; height: 75px; font-size: 30px; >.header.smallernav a

В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:

$(function() < $(window).scroll(function() < var scroll = $(window).scrollTop(); if (scroll >= 500) < $(".header").addClass('smaller'); >else < $(".header").removeClass("smaller"); >>); >);

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

Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:

@media all and (max-width: 660px) < .header h1#logo < display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; >.header nav < display: block; float: none; height: 50px; line-height: 50px; text-align: center; margin: 0 auto; >.header nav a < line-height: 50px; margin: 0 10px; >.header.smaller < height: 75px; >.header.smaller h1#logo < height: 40px; line-height: 40px; font-size: 30px; >.header.smallernav < height: 35px; line-height: 35px; >.header.smallernav a < line-height: 35px; >>

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

Если вам понравилась эта статься, поделитесь ей со своими друзьями!

Как изменить шапку сайта (часть 1)

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

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

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

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

Так выглядела шапка до изменений:

У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.

Что бы я изменил в дизайне?

1. Шрифт и цвет у логотипа
2. Размер и цвет остального шрифта
3. Убрать зеленую полосу
4. Блок с контактами разместить на верхней панели

После изменений:

Между тегами head в HTML файле:

Делать верстку мы будем на flexbox.

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.

CSS стили

/* Общие стили для шапки */
body font-family: ‘Forum’, cursive;
color: #777;
background-color: #fff;
>

Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header display: flex;
justify-content: space-around;
padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
>

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green color: #b2db41;
font-weight: bold;
>

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

CSS код

/* Флекс контейнер для шапки */
header display: flex;
justify-content: space-around;
padding: 5px;
border-bottom: 5px solid #b2db41;
>

/* Стили для всех ссылок внутри флекс контейнера */
header a display: block;
color: #212121;
padding: 12px;
text-decoration: none; /* убирает подчеркивание */
font-size: 100%;
text-shadow: 0 1px 0 #fff;
border-radius: 4px;
>

Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.

/* Ширина дочернего блока под логотип */
.wrap-logo width: 30%;
>

Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.

/* Стилизация логотипа */
.wrap-logo #logo font-family: ‘Roboto Slab’, serif;
font-size: 200%;
font-weight: bold;
>

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span color: #b2db41;
>

Создано 08.04.2019 10:20:30

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Адаптивная шапка сайта

Здесь вы узнаете, как сделать адаптивную шапку сайта при помощи CSS.

Адаптивная шапка сайта

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

Как сделать адаптивную шапку сайта

Шаг 1) Добавляем HTML:

  
ЛоготипКомпании 
Главная Контакты О нас 
 
 

Шаг 2) Добавляем CSS:

 /* Стиль шапки с серым фоном и отступами */ .header < overflow: hidden; background-color: #f1f1f1; padding: 20px 10px; >/* Стиль ссылок шапки */ .header a < float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; >/* Стиль ссылки логотипа */ .header a.logo < font-size: 25px; font-weight: bold; >/* Изменение цвета фона при наведении курсора */ .header a:hover < background-color: #ddd; color: black; >/* Стиль активной/текущей ссылки */ .header a.active < background-color: dodgerblue; color: white; >/* Сдвигаем секцию со ссылками вправо */ .header-right < float: right; >/* Медиа-запрос для адаптивности – когда ширина экрана 650px или меньше, ссылки будут друг над другом */ @media screen and (max-width: 650px) < .header a < float: none; display: block; text-align: left; >.header-right < float: none; >>