Как поместить в body именно под объект «меню» полосу на всю ширину экрана?

Question

[Eduard_Vladimirovich]

Доброго времени суток. Сразу извиняюсь мог не правильно сформулировать вопрос, попробую показать на картинке.

Есть меню вверху сайта часть его находится в контенте 1200px, а остальное по краям jpg полоса. Данная полоса прописана в body.

Теперь абсолютно такую-же полосу нужно вставить под меню ниже, тоже в body под контент. Подскажите пожалуйста. (На картинке указано) "Удалено"

Answer 1

[Eduard_Vladimirovich]

Никто так и не дал правильного решения.... Если обернуть что-либо дивом поверх, то данный див потом ломает все меню. Задашь 100% width например расширяется и контент.... и тому подобное

Comments

[tef]

Покажите хотя бы что нибудь. А то так это "битва экстрасенсов". Я, честно говоря, раза 3 перечитал, так и не понял, что вы имеете ввиду. Зачем вам совать вторую картинку в боди?

[Eduard_Vladimirovich]

tef: Извините я image удалил...... сейчас восстановлю

[Eduard_Vladimirovich]

tef: Очень надеюсь на ваш совет, а лучше-бы пример......

[tef]

между меню и контентом вставьте див, задавайте ему высоту равную фоновой картинке, бэкграудом положите в него картинку. Контенту сделайте отрицательный верхний марджин на высоту этого дива

[tef]

верхней части меню, конечно же

[Eduard_Vladimirovich]

tef: А если вот так и margin-bottom диву дать? Что-бы он подтянул к себе с низу менюху?

[tef]

Eduard_Vladimirovich: Ну можно и так.

[Eduard_Vladimirovich]

В общем ваш ответ правильный! отмечаю как решение. спс

[Eduard_Vladimirovich]

tef: А предыдущий вариант не является костыльным?:) На этот уже мозгов не хватает.... сутки прошли уже

[tef]

В вёрстке нет костыльных вариантов. HTML и CSS изначально сами по себе один большой костыль. Привыкайте. Если оно работает и отображается в нужных браузерах, значит всё ок.
Но вы изначально не по феншую начали делать. Но это дело практики. И не бойтесь никогда лишних дивов. Вы бы знали, как в своё время скруглённые углы делались :p

Answer 2

[IceJOKER]

разные варианты..
css3 позволяет добавлять несколько фоновых изображений.
можно два div-а wrapper-а добавить с left bottom и right bottom фоном и с высотой 100%.
можно вырезать одну большую картинку и установить фоном body.
Перед "Онлайн займы" и после "Займы по смс" добавить блок с изображением(фоном)

position: fixed;
position: absolute;

в общем много разных вариантов )

Comments

[Eduard_Vladimirovich]

Тоесть 2 блока слева и справа? Перед онлайн и после смс. Или как.....

[IceJOKER]

Eduard_Vladimirovich: yep

Answer 3

[Alexander Sydorenko]

Вот здесь на днях нашел очень хороший гайд, как раз по Вашему случаю https://css-tricks.com/full-browser-width-bars/

Comments

[Виталий Киренков]

Оно основано на том, чтобы на боди навесить overflow-x: hidden, в противном случае будет гигантская горизонтальная прокрутка. Так что не к каждому случаю подойдёт.

[Alexander Sydorenko]

Виталий Киренков: Именно так, но иначе у Вас и не получится в общем случае решить эту задачу. Очень редко на моем опыте overflow-x: hidden для body ломал верстку, так как контейнер внутри все чаще и чаще в процентах, либо по медиа-запросам однозначно уже body.

[Виталий Киренков]

Alexander Sydorenko: Вариант с дополнительной обёрткой кошерней. Этот вариант всё таки попахивает костылём =)

Answer 4

[Виталий Киренков]

Надо смотреть вёрстку. По идее - просто. Если контент имеет отдельную обёртку которая её центрирует, то нужно просто обернуть в ещё один div и на него просто прописать такой же фон. Все остальные варианты - костыльные, ибо высота до контента может быть разной, соответственно нельзя задать для body и сместить.

Comments

[Eduard_Vladimirovich]

Извините а Вы удаленно не сможете посмотреть? Например через программу teamviewer. Если конечно Вы не против....

[Виталий Киренков]

Eduard_Vladimirovich: напишите мне в скайп.

[Eduard_Vladimirovich]

Виталий Киренков: Я Вам только что на почту написал, просто скайпа нет....

[Eduard_Vladimirovich]

Обернуть в див данное меню я так понял. Тогда какие значения прописать диву? Что-бы он проходил под контентом, меню и в body