Выход за рамки контейнера

[volshebnyi]

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

Подскажите, пожалуйста, как зеленый фон меню продлить вправо до упора. Пытался делать :after с абсолютным позиционированием с отрицательными значениями (как мне советовали на форуме). Но в таком случае появляется горизонтальный скрол...

Верстка на bootstrap.

 

http://html.skoba.com.ua/

 

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

[rus]

до упора чего? браузера? класс container параметр width

[volshebnyi]

до упора чего? браузера? класс container параметр width

да, до упора браузера. Как на картинке:

 

блок container центрирован. Что даст width?

[Switch74]

я бы предложил сделать еще один блок, подобный меню, можно с помощью псевдоэлемента например body>header:before

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

Edited September 24, 2014 by Switch74

[rus]

блок container центрирован. Что даст width?

ну он ограничивает блок меню по ширине и соотв. центрирован - это да.

изначально вы не озвучили условия, что у блока container нельзя менять ширину.

а так да, соглашусь с Switch74, нужно через before пробовать.

[Z1gnet]

Но в таком случае появляется горизонтальный скрол...

как вариант оберните весь сайт в div.wrapper и дайте ему overflow-x: hidden;

на сайте будет больше контента и дропдаун будет нормально отображаться. либо дополнительно прописать следующие стили:

html, body{height:100%;}.wrapper{min-height:100%}

[volshebnyi]

 

блок container центрирован. Что даст width?

ну он ограничивает блок меню по ширине и соотв. центрирован - это да.

изначально вы не озвучили условия, что у блока container нельзя менять ширину.

а так да, соглашусь с Switch74, нужно через before пробовать.

 

А как именно через :before? Почему не через :after? Я просто не могу понять куда копать....

[Switch74]

можно хоть просто вставить элемент в изначальную верстку html - это как вам будет удобней и приятнее

наша задача, чтобы в родительском блоке меню появился элемент, который будет рисовать до конца экрана полосу, а как вы это сделаете - уже ваше дело, хоть js можно, хоть flash выбирайте удобный для вас способ

Edited September 30, 2014 by Switch74

[volshebnyi]

можно хоть просто вставить элемент в изначальную верстку html - это как вам будет удобней и приятнее

наша задача, чтобы в родительском блоке меню появился элемент, который будет рисовать до конца экрана полосу, а как вы это сделаете - уже ваше дело, хоть js можно, хоть flash выбирайте удобный для вас способ

Ну вот так - http://html.skoba.com.ua/

 

Появляется горизонтальный скролл - ума не приложу откуда...

[Switch74]

вы не туда вставили :before, его в header надо было делать, что-то вроде

header:before {content: '';position: absolute;display: block;top: 35px;right: 0px;bottom: 40px;background: #72ae44;width: 50%;

и не забыть поставить

.container {background: #fff;}

 

Edited October 2, 2014 by Switch74

[volshebnyi]

 

вы не туда вставили :before, его в header надо было делать, что-то вроде

header:before {content: '';position: absolute;display: block;top: 35px;right: 0px;bottom: 40px;background: #72ae44;width: 50%;

и не забыть поставить

.container {background: #fff;}

 

 

Уважаемый Switch74, спасибо Вам огромное!

Добавил еще только position: relative; для блока header и все заработало! А вот .container {background: #fff;} ничего не изменяет - и так и так работает!

Еще раз спасибо!

Edited October 2, 2014 by volshebnyi

[Switch74]

оно работает в вашем случае , если ваше меню станет меньше по размерам, то зеленая полоска вылезет слева