Как сделать шапку на всю ширину?
На ширине экрана 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 менялась по ширине от размера экрана, спасибо.
- Вопрос задан более трёх лет назад
- 1664 просмотра
Комментировать
Решения вопроса 3
width:100%;
height:auto;
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Тыжверстальщик! Наверстай мне упущенное.
А ты уверен, что это хорошая идея?
Gif-ка вообще не лучшее решение для целой шапки, а тем более растянутая гифка.
1) через background-image и background-size cover.
2) указать явно width 100%, height auto.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Как растянуть секцию header на все ширину экрана?
Здравствуйте, столкнулся с такой проблемой, когда я оборачиваю тег nuv в контейнер, чтобы задать ему нужную мне ширину, header перестает растягиваться на весь экран, появляется скроллбар и непонятная белая область справа. Когда не оборачиваю в контейнер — все нормально.
Вот без обёртки в контейнер:
С контейнером:
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
- Вопрос задан более трёх лет назад
- 11591 просмотр
Шапка на всю ширину! — Как реализовать? (скриншот внутри)
Всем привет, знаю что не по теме, но у меня вопрос как изминить на стандартном шаблоне в низу
! сайт работает!?
TheMorgan
- Испытатели
- Сообщений: 1
#5 27 июня 2017 в 07:38
Открой в редакторе файл: \templates\default\main.tpl.php и измени языковые константы. ну или жёстко задай в шаблоне.
Whoami
- Испытатели
- Сообщений: 64
#6 27 июня 2017 в 09:30
Александр, header в сss ищите и увидите значение в пикселях 1280, меняйте на 100% и все.
Фриланс по Intantcms 1 и 2 версий.Писать в ЛС. Отзывы заказчиков
kirkr
- Испытатели
- На орбите
- Сообщений: 1392
#7 27 июня 2017 в 09:58
Александр, в шаблоне ограничение идет от идентификатора #layout, если хотите шапку большей ширины, то вам нужно header из шаблона main.tpl вынести за пределы #layout, далее уже стилями делаете все что душе угодно.
Нормально делай — нормально будет!
frukt
- Тольятти
- Испытатели
- Сообщений: 380
#8 27 июня 2017 в 11:04
нужна такая шапка как на скрине.
Александр
Endroid
- Испытатели
- Сообщений: 166
#9 27 июня 2017 в 11:24
Можно и так, смотрите видео
Прожарки дополнений ► https://iscms.ru Плюшки тут► https://russait.ru ТЕЛЕГА ➤ https://t.me/+E-N1uja-nXgzYzZi
Алексей Т
- Испытатели
- На орбите
- Сообщений: 4254
#10 27 июня 2017 в 18:24
да не нужен мне ваш компонент.
как я и думал, frukt, пробовал реализовать?
Whoami
- Испытатели
- Сообщений: 64
#11 27 июня 2017 в 18:47
нужна такая шапка как на скрине
Александр
В файле main.tpl.php найдите такой код (примерно 36-45 строки):
Замените на этот (содержимое header обернули в
В любом файле css, например, в theme-layout.css добавьте такой код:
Если Вас смущает !important, можете найти найти все эти селекторы и сделать правки непосредственно в них. Единственный селектор новый — #headfull — его нужно будет дописать.
t.me/googleindexingapi
- Хьюстон
- Испытатели
- На орбите
- Сообщений: 2477
#12 27 июня 2017 в 19:50
Я сделал шапку на всю ширину путем вставки в основной див картинку заливки, вырезанную из шапки. Ширина её пиксель, высота соответствует шапке. Вставлена бекграундом, прижата вверх и повторяется по горизонтали. Пример стилями показать не могу, ибо не у компьютера.
Yar
- Испытатели
- Сообщений: 521
#13 27 июня 2017 в 22:35
нужна такая шапка как на скрине
Александр