Как сделать header на всю ширину страницы
Перейти к содержимому

Как сделать header на всю ширину страницы

  • автор:

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

На ширине экрана 480px background-image у шапки сжимается и справа вылезает общий фон,как исправить

/* Общие стили */ * < margin: 0; padding: 0; >article, figure, footer, header, nav, section < display: block; >ul < list-style: none; >a < text-decoration: none; >/* Шапка */ header < width: 100%; margin-bottom: 100px; position: relative; height: 100px; >/* Меню*/ .logo < display: block; float: left; padding: 25px; >.spisok < display: block; float: right; margin-top: 70px; >.menu_1 < padding-left: 10px; font-size: 20px; >.menu_2 < padding-left: 10px; font-size: 20px; >.menu_3 < padding-left: 10px; font-size: 20px; >a:hover < color: #ffffff; /* Цвет ссылки при наведении на нее курсора мыши */ text-decoration: underline; /* Добавляем подчеркивание */ >ul.spisok li < display: inline; >.pp < text-align: right; >.menu < float: right; >.menu li < display: inline-block; >.menu a < text-transform: uppercase; display: block; color: darkcyan; padding: 25px; >.menu a:hover < color: #fff; background-color: darkcyan; >/* Основное содержимое */ .container < margin:0 auto; width: 100%; max-width: 960px; >@media (min-width: 480px )and (max-width:768px) < * /* Ширину класса container делаем резиновой */ header < width: 100%; >.container < max-width: 90%; >/* Расположение блоков в footer делаем в одну колонку */ .col-three < float: none; width: 100%; text-align: center; >.image < float: none; >.text_image

Как растянуть header?

Подскажите как растянуть header? У меня это гифовская картинка 1200 пикселей, как при помощи css сделать чтобы картинка gif менялась по ширине от размера экрана, спасибо.

  • Вопрос задан более трёх лет назад
  • 1754 просмотра

Комментировать

Решения вопроса 3

karjan

width:100%;
height:auto;

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

webirus

Тыжверстальщик! Наверстай мне упущенное.

А ты уверен, что это хорошая идея?
Gif-ка вообще не лучшее решение для целой шапки, а тем более растянутая гифка.
1) через background-image и background-size cover.
2) указать явно width 100%, height auto.

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Как растянуть секцию header на все ширину экрана?

5d35e0c19ad40647317916.jpeg

Здравствуйте, столкнулся с такой проблемой, когда я оборачиваю тег nuv в контейнер, чтобы задать ему нужную мне ширину, header перестает растягиваться на весь экран, появляется скроллбар и непонятная белая область справа. Когда не оборачиваю в контейнер — все нормально.
Вот без обёртки в контейнер:

5d35e0eed428e147314291.jpeg

С контейнером:

    Faun     
* < padding: 0; margin: 0; >body < font-family: 'Bebas Neue', sans-serf; >.header < background: #fff url(../img/bg_header.png) no-repeat center top / cover; >.container < width: 1470px; margin: 0 auto; >nav < display: flex; justify-content: space-between; align-items: center; padding-top: 55px; >nav h4
  • Вопрос задан более трёх лет назад
  • 12234 просмотра

Контент по центру, фон по ширине

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

Создадим специальный класс, назовем его контейнер .container , целью которого будет задавать ширину и располагаться по центру. Ширина при этом может быть фиксированна в px или задана в % или vw. Или, возможно, вам понравится вариант, когда ширина ограничена максимальным значением, а до него может спокойно растягиваться. Это лишь нюансы, принцип работы при этом останется неизменным.

Пусть заказчик поручил нам сверстать header с фиксированной шириной

Свои собственные уникальные стили будут написаны в классе .header , а центрирование задаст .container

.container < width: 700px; margin: 0 auto >.header

Но что делать, если в какой-то секции должен быть фон на всю ширину окна?

Поступают просто. Добавляют задающие фон стили для самой секции, а контент внутри нее оборачивают в div с классом .container

 

Нашими ромашками можно украсить всё!

Поскольку содержимому блока потребуется задать свои уникальные стили, то нужно добавить второй класс ( promo-inner )

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

Альтернативный вариант

Есть и другой способ сделать фон на всю ширину окна при фиксированной ширине контента.

Нужно сделать блок с фиксированной или ограниченной шириной, как и в предыдущем варианте, и потом создать для него псевдоэлемент. Этому псевдоэлементу задать абсолютное позиционирование с top:0 и left: 50%; transform: translateX(-50%) для центрирования по горизонтали, высоту, равную 100% высоты родителя и ширину равную 100vw. Но, если высота сайта больше высоты экрана, т.е. уже есть вертикальная полоса прокрутки, то ширина в 100vw даст побочный эффект в виде горизонтальной полосы прокрутки. И её нужно будет скрыть, задав для body .

 body < overflow-x: hidden; >.section < position: relative; max-width: 768px; >.section::before

Мне больше симпатичен вариант с дополнительной оберткой (хоть и не люблю их), чем absolute, transform и еще и overflow, тем более на body.

Фон на половину окна

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

Задача делится на 2 случая. Первый - когда у текста фон безразличен:

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

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

В обоих случаях для фона использованы псевдоэлементы.

  • Предыдущий: Как задать цвет placeholder на CSS
  • Следующий: Подключение шрифтов из папки. CSS свойство font-face.

Добавить комментарий

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