Как формировать background что бы он выходил за свои рамки и заполнял все по левому краю?

Question

[Adilet Zhuman]

Я начинающий верстальщик, возник такой вопрос как прописать фон что бы он выходил за свои рамки.
По моим познаниям, я решил создать главный блок - которую расположу по центру, в нем два блока
это сайдбар и основное меню, которые разположены справа и слева. И нужно прописать так что бы для сайдбара был фон, но что бы он растягивался по ширине сайта в левую сторону, как указано на самом дизайне)

Comments

[Евгений Петров]

Описанного мало. Непонятно.
1. Положение меню фиксировано при прокрутке контента?
2. Область контента фиксирована по ширине?

[Adilet Zhuman]

Евгений Петров: Область контента фиксирована по ширине, и положение меню тоже фиксировано то есть она стоит сверху всегда) не двигается

Answer 1

[Евгений Петров]

Если на поддержку IE8 плевать, используем calc().
Располагаем правую границу фиксированного меню исходя из 50% ширины области просмотра за вычетом половины центрированного блока. Пример

Если плевать на поддержку IE9, то можно воспользоваться linear-gradient().
Заливаем документ градиентом с границей, рассчитанной аналогично предыдущему варианту. Пример

Comments

[Adilet Zhuman]

В вашем случаете получается, то что если сжимать браузер то menu уходит, а он должен прижаться к левому краю когда его сжимают) а когда нет что бы стоял по середине=)

[Евгений Петров]

Держите пример, который и в IE8 будет работать.

[Adilet Zhuman]

Евгений Петров: Спасибо

[Adilet Zhuman]

Евгений Петров: Но есть одна проблемка, когда сжимаешь браузер до разрешение как на сотке, то при прокрутке вправо, элементы которые находятся в #content уходят поверх элементов #container

[Евгений Петров]

Динамическая подстройка областей не всегда реализуется только с помощью CSS, увы.
Вот вам финальный пример, размеры описал для понимания.

[Adilet Zhuman]

Евгений Петров: Ваш пример не подошел так как, я сжал браузер до размеров телефона, и прокрутке (влево) в часть с основным контентом, блок основного ложится поверх контейнера где находится меню

[Евгений Петров]

Меню сдвигается вместе с контентным блоком. Если вы ожидаете, что меню видно всегда, то попробуйте описать или даже нарисовать наброски — а что должно происходить с меню при разной ширине области просмотра.

[Adilet Zhuman]

Евгений Петров: Да меню сдвигается вместе с контентом только до своей минимальной ширины, потом идет наложение вот скрин

[Евгений Петров]

А вы точно jQery подключили?)

[Adilet Zhuman]

Евгений Петров: Да, перепроверил)

[Евгений Петров]

https://yadi.sk/d/PkPSal1Pg5az7

[Adilet Zhuman]

Евгений Петров: Скачал, все также, по пробуйте ползунок который выйдет снизу прокрутить вправо=) увидете=)

[Евгений Петров]

У вас, случайно, не отключено выполнение JS? Того, что вы говорите, не может быть в противном случае.
Поставьте внутри функции checkScroll вызов alert('test'), чтобы убедиться в этом.

[Евгений Петров]

И напишите, что в консоли пишется.

[Adilet Zhuman]

Евгений Петров: вот что выдает в консоли, я еще прописовал checkscroll
Failed to load resource: net::ERR_FILE_NOT_FOUND
calc.html:43 Uncaught ReferenceError: $ is not defined

[Евгений Петров]

Вот об этом я вам второй раз и говорю — нет у вас jQuery.

[Adilet Zhuman]

Евгений Петров: все нашел в чем проблема была, не правильно указынный код для "code.jquery.com/jquery-1.11.2.min.js" Большое спасибо за помошь=)

[Евгений Петров]

Что удивительно — я в своём файле поставил загрузку с сайта jQuery. Как вы умудрились его «исправить»?)

[Adilet Zhuman]

Евгений Петров: Вы написали //code.jquery.com/jquery-1.11.2.min.js, я конечно ничего не понимаю в js, но думаю вы забыли указать http: =)

[Евгений Петров]

Не забыл. Именно так.

[Adilet Zhuman]

Евгений Петров: Не знаю, страница долго грузилась, и в консоле было написано что не найден js по этой пути=) и я его дополнил, но все равно, спасибо большое все работает это самое главное=)

Answer 2

[Maksim Zverev]

Если честно из вашего вопроса сложно понять, что вам надо.

Фон и так выходит свободно за пределы контейнера в котором лежит. Если вам надо прижать фон к правому краю установите background-position: 100% 0

Comments

[Adilet Zhuman]

Мне нужно что бы весь контент отоброжался по центру, и что бы фон сайдбара заполнял все, даже то что стоит у него слева)

[Adilet Zhuman]

или проще говоря как сверстать такой макет шаблона? Что бы блоки с сайдбаром и контентом отображался по центру сайта, и что бы у них был такой фон как на картинке=)

[Maksim Zverev]

Adilet Zhuman:
Там много вариантов решений, вот одно из них:
codepen.io/m1skam/pen/zGOovo

[Adilet Zhuman]

Maksim Zverev: отоброжается правильно, но при сжимании браузера он уходит под right-side, а это не то что мне нужно=)

[Maksim Zverev]

О.о ???? Кто он?

Answer 3

[Сергей ZSA]

Я бы сделал следующим образом (как в прочем часто и реализовывал):
2 блока (можно flex, можно inline-block, можно float, как душа захочет и поддержку смотря чего надо). Первому блоку даём % ширину (навскидку сколько там будет, либо можно померить) и даём ему min-width в ширину сайтбара в пикселей 300 (тоже надо определить на сколько примерно, померив ширину от правого края до левого края самого длинного пункта/места).
Второму блоку задаём оставшийся % и тоже какую-то минимальную ширину, при которой всё будет адекватно отображаться (наверно те же 300px). Кружочки с твиттером, rss и всё подобное лучше делать через absolute относительно каких-то определенных блоков внутри светлого (если есть какая-то смысловая привязка).

И самый главный момент - вы уверены, что на странице будет всегда такое большое количество контента и все 3 кружочка будут всегда конкретно на этих местах?

Comments

[Adilet Zhuman]

Ваш способ рабоает, по пробовал вот пример . Но есть такая штука, когда сжимаешь браузер то блок с вторым контентом уходит вниз=) может быть как то доработать, не знаю)

[Сергей ZSA]

Adilet Zhuman: убрать float, добавить min-width для content, для wrap добавить display: flex; //flex почти 93% браузеров поддерживают, не думаю, что есть смысл делать без него, просто добавить вендоры.

Если вы хотите сделать вообще адаптивно этот диз - для мобильников надо сделать отдельно каким-либо образом. Меню можно сделать сверху, при этом обойтись малой кровью, добавив только flex-wrap: wrap; для wrap и flex-grow: 1; для сайтбара и контейнера или меню можно сделать выезжающим по свайпу/клику по иконке меню, но тут расписывать, как это реализовывать просто не вижу смысла.