Как именно сверстать этот блок?

Question

[wagwan]

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

Могли бы Вы подсказать мне, как именно нужно подойти к верстке данного блока?
Мне нужно сделать так, чтобы меню в оранжевом блоке подстраивалось под ширину контейнера (допустим: "margin: 0 auto;width: 1024px;"). Но сам фон оранжевого блока начинался от правого края экрана и тянулся до логотипа.

Заранее спасибо!

Answer 1

[Сергей Горячев]

https://jsfiddle.net/pvfxnnyt/1/ - суть подхода
https://jsfiddle.net/v2s0z12v/ - моя реализация
Надеюсь, суть понятна.
Для шапки задаем градиентную заливку на 50%.
Меню картинкой будет и оно перекроет "стык".
Ну, или фон картинкой, как в макете.
Хотя я сделал бы просто цвет, там удобно.
Через absolute еще можно, но я не люблю его.

Comments

[khipster]

там какая то вакханалия с градиентами :D

[Сергей Горячев]

khipster: обычный кроссбраузерный линейный градиент.

[wagwan]

Спасибо!)

[Сергей Горячев]

wagwan: я бы на твоем месте сделал для header цвет, как есть сейчас. а вот для меню фоновую картинку с выравниванием по правому краю. критично чтобы правый кусок был тоже картинкой?

[Сергей Горячев]

wagwan: ща посмотрю, сек.

[Сергей Горячев]

wagwan: ну, в принципе, всё тоже самое, только нужен еще один див. для header задать фоновую картинку. для header_inner сделать градиент только не оранжевого цвета, а белого. и дальше тоже самое, для меню такой же фон картинкой, как у header.

[chifixsa]

справа кинуть на ширину 50vw, чтобы ездил до половины

[Сергей Горячев]

wagwan: https://jsfiddle.net/v2s0z12v/2/
чтобы было красиво, у png нужно чуть подрезать правый край, чтобы на любом экране стыковалось красиво.

[Сергей Горячев]

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

Answer 2

[khipster]

флоатом зафигачь два дива в шапку, и первому задай фон :)

Comments

[khipster]

wagwan: [шапка [логотип] [меню]]

[khipster]

wagwan: absolute то зачем? %)

Answer 3

[Владислав]

Если ширина логотипа фиксирована, то я бы сделал примерно так https://jsfiddle.net/ce052Lwf/1/

Answer 4

[Web Developer Blog]

Если совсем все плохо то логотип картинкой с таким вырезом и z-index больше чем у меню.