Продолжение фона для меню

[volshebnyi]

Здравствуйте!

Помогите, пожалуйста, решить проблему. Ширина хедера - 1170 px. Необходимо, что бы фон для меню (малиновый прямоугольник) продолжался вправо до конца экрана. Как на изображении:

Вот сам код - https://jsfiddle.net/0rzhsdnx/

Заранее благодарю за помощь!

 

Edited March 29, 2016 by volshebnyi

[Switch74]

я бы посоветовал сделать обертку, для вашего header, которая будет на всю ширину браузера и уже в этой обертке сделать нужный фон на правую половину сайта
header будет накладываться на этот фон, главное состыковать без швов полосу. Идея в следующем https://jsfiddle.net/0rzhsdnx/6/

так же можно сделать и другими способами, которые очень похожи на этот

[by chris]

https://jsfiddle.net/0rzhsdnx/5/

Edited March 29, 2016 by by chris

[by chris]

Фиксированный header, поэтому появляется полоса прокрутки ниже размера вьюпорта 1240px.

[volshebnyi]

Ну да. Хедер фиксированный.

[Launder]

1 час назад, volshebnyi сказал:

фон для меню (малиновый прямоугольник)

Цитата

Вот сам код

 

А где малиновый прямоугольник в Вашем примере?

[by chris]

@Switch74, я как-бэ уже выложил готовый вариант:)

[Switch74]

ну как бы не заметил, пока писал, твоего не было

[Igor Schnaider]

Мой вариант :-)

[volshebnyi]

5 часов назад, Switch74 сказал:

я бы посоветовал сделать обертку, для вашего header, которая будет на всю ширину браузера и уже в этой обертке сделать нужный фон на правую половину сайта
header будет накладываться на этот фон, главное состыковать без швов полосу. Идея в следующем https://jsfiddle.net/0rzhsdnx/6/

так же можно сделать и другими способами, которые очень похожи на этот

Спасибо огромное! Получилось!

[Launder]

Вот Вам ещё вариантик, основанный на довольно-таки занимательной конструкции:

.right
    {
      float: right;
      margin-right: -100%;
      width: 100%;
    }

 

[Launder]

Мне кажется, задача интересна тем, что решить её можно довольно-таки различными способами...

И хотя  идеи, в общем-то похожи:

В 28.03.2016 в 15:29, Switch74 сказал:

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

можно отработать некоторое количество вариантов, и лучше увидеть возможности CSS:

1. В обёртке псевдоэлемент, элементы выровнены за счёт абсолютного позиционирования, относительно их родительских элементов.

2. Псевдоэлемент самого хедера, обтекает его справа, за счёт отрицательного марджина остался на той же строчке.

3. Аналогичен предыдущему варианту, только выполнен через абсолютное позиционирование.

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

4. Довольно интересный вариант с инлайн-блоком справа и марджином слева.

5. А если сделать блоки плавающими, то марджин и не нужен.

6. Почему бы не сделать это на флексбоксах? решение похоже на предыдущее.

7. Ну и наконец, если мы работаем с фоном, то почему бы нам не сделать всё это через фон?

кстати если в коде немного поменять значения свойств:

        background-image: linear-gradient(#d91d52 %, #d91d52 66px, transparent 66px);
        background-position: 100% 30px;

то всё также работает.

Обращаю внимание на 100% в свойстве background-position. Значение 0 - картинка прижата к левому краю, 100% - к правому, остальные координаты между этими двумя положениями. Такая координатная сетка удобна, но отличается от привычной, где 100% это размер блока по координате.

Ну вот, надеюсь приведённые варианты, покажутся кому-то интересными.

 

Edited April 19, 2016 by Launder