Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого

@SilverWolf · Регистрация: 04.06.2015

Студворк — интернет-сервис помощи студентам

Привет всем!
Вопрос из разряда, как сделать.
Итак, условие:
Есть блок назовем его First, он имеет в себе блок Container (width: 980px; padding: 0 10px). В контейнере, где-то у дочерних элементов есть 2 nav (менюшки), по данным менюшкам, блок First делиться на левая часть и правая. Примерное деление, ~60% левая часть, ~40% правая.
Теперь самое интересное!
First имеет в себе картинку, она растянута по всему экрану, на всю высоту и ширину.
Эта картинка должна быть закрашена(с альфа каналом - rgba) в 2 цвета, без разницы каких. Как это сделать?

Проблема в том, Container = 980px, я его делю на 60% и 40%. Container кстати по середине.
Теперь если я попробую для применить :before и :after, по данным значением, то они не совпадают с теми что внутри Container.
У кого-нибудь есть идеи? Бьюсь над этим 3-и сутки...

@AlexZaw · 25.07.2018, 14:30

Сообщение от Kornerupin

Можно =))) Просто проведи дальше и нажми ctrl+c, спокойно копируется. Там часть не видна, а скопировать её можно.

Проводил, выделяется вместе с половиной меню

Сообщение от Kornerupin

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

Эмм, где у меня фикированая ширина???

@Kornerupin · 25.07.2018, 14:33

AlexZaw, width: 60%; width: 40%;

У тебя не совсем фиксированная, но там была идея в том, что ширина может быть 56.6 - 43.4 - в общем, подстраивается под размеры меню.

Ну да ладно, фиг с ним - вроде проблема решилась, и это главное =)

@AlexZaw · 25.07.2018, 15:39

Сообщение от Kornerupin

в общем, подстраивается под размеры меню

Что за бред? Если у меня меню будет из двух пунктов, то картинка будет занимать 5-10% ширины? Не стоит воспринимать фантазии ТС за руководство к действию и завязывать элементы друг на друга, это может плохо кончиться, например попробуйте в своем примере урезать меню до 4 пунктов, тогда на экране в 1366px надпись выходит за экран...

@Kornerupin · 25.07.2018, 15:43

AlexZaw, надпись не выйдет за экран, если сделать адекватную адаптивность - просто потихоньку уменьшать размеры текста.

А по поводу двух пунктов в меню - такое уж точно нереально, это главное меню сайта, там меньше 4х не будет. А если и будет, это уже не по макету.

Сломать можно что угодно, вопрос в том, чтобы оно "само по себе" не ломалось. Если специально критичные ситуации не создавать, всё нормально будет.

@SilverWolf · 25.07.2018, 17:57 **[ТС]**

Привет! Короче спасибо всем, не могу сказать, что кто-то из вас один помог, все помогли, по итогу, я все же сам на основе ваших советов и попыток вывел собственное решение:

Вот кусочек кода:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="Container MarginCenter">
  <div class="FirstBlock Row">
     <div class="FirstBlockLeftSide" style="position: relative; width: 60%">
        <!-- Content -->
     </div>
     <div style="position: relative; width: 40%">
        <!-- Content -->
     </div>
  </div>
</div>

Теперь самое интересное:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
FirstBlockLeftSide {
position: relative; /* !!! */
/* Other Properties */
}
 
FirstBlockLeftSide:before {
content: "";
    position: absolute;
    right: 0;
    top: -2rem; /* Если вдруг задали отступ от верха... но если не задавали можно убрать */
    bottom: 0;
    left: -100vw;
    height: 100vh;
    background-color: #ccc; /* Тестовый Bgc */
}

Тоже самое делаем и с правым блоком, только меняем значение left и right между собой. И теперь, ВАЖНО, чтобы div который держит before/after, БЫЛ ИМЕННО Relative. Если не указать, то ничего не получиться.
Чтобы у нас не было скрола в право, идем в тег body, и ставим: overflow: hidden;

Всем спасибо, вы лучшие!)

@AlexZaw · 25.07.2018, 18:07

Все равно не пойму зачем использвать псевдоэлементы, когда можно того-же самого добиться и без них?

Сообщение от SilverWolf

ВАЖНО, чтобы div который держит before/after, БЫЛ ИМЕННО Relative

Ну это как бы логично, это механика работы позиционирования (кстати можно и absolute указать, при некотором шаманстве разницы не будет)

@Freeze_Breeze · 25.07.2018, 19:55

SilverWolf, А этот код работает у Вас?

Новые блоги и статьи Все статьи Все блоги /
Альцгеймер и колоссальный объем вычислений Programma_Boinc 08.08.2026 Альцгеймер и колоссальный объем вычислений Сейчас по направлению болезни Альцгеймера идет колоссальный объем вычислений. Это один из главных приоритетов проекта. Такой массовый наплыв задач. . .	Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .	Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .
У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .	Создание формы заимствованного документа Maks 03.08.2026 Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56

	Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого 24.07.2018, 22:31. Показов 3324. Ответов 26 Метки :after, :before, background-color, background-image, position absolute (Все метки) Привет всем! Вопрос из разряда, как сделать. Итак, условие: Есть блок назовем его First, он имеет в себе блок Container (width: 980px; padding: 0 10px). В контейнере, где-то у дочерних элементов есть 2 nav (менюшки), по данным менюшкам, блок First делиться на левая часть и правая. Примерное деление, ~60% левая часть, ~40% правая. Теперь самое интересное! First имеет в себе картинку, она растянута по всему экрану, на всю высоту и ширину. Эта картинка должна быть закрашена(с альфа каналом - rgba) в 2 цвета, без разницы каких. Как это сделать? Проблема в том, Container = 980px, я его делю на 60% и 40%. Container кстати по середине. Теперь если я попробую для применить :before и :after, по данным значением, то они не совпадают с теми что внутри Container. У кого-нибудь есть идеи? Бьюсь над этим 3-и сутки... 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 14:33
	AlexZaw, width: 60%; width: 40%; У тебя не совсем фиксированная, но там была идея в том, что ширина может быть 56.6 - 43.4 - в общем, подстраивается под размеры меню. Ну да ладно, фиг с ним - вроде проблема решилась, и это главное =) 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 15:43
	AlexZaw, надпись не выйдет за экран, если сделать адекватную адаптивность - просто потихоньку уменьшать размеры текста. А по поводу двух пунктов в меню - такое уж точно нереально, это главное меню сайта, там меньше 4х не будет. А если и будет, это уже не по макету. Сломать можно что угодно, вопрос в том, чтобы оно "само по себе" не ломалось. Если специально критичные ситуации не создавать, всё нормально будет. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	25.07.2018, 19:55
	SilverWolf, А этот код работает у Вас? 0