Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Question

[Антон Вебсайтовский]

Что-то я по старинке делаю и есть нюансы.

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

Поверх хочу наложить центральный блок, который будет 1200px, и в нем уже разместить текст, в центральном блоке задать первому блоку 50%, чтобы текст не вылезал на картинку.

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



Как лучше реализовать?

Пример схемы тут: https://codepen.io/AXOT/pen/OJqWGpd

Comments

[Антон Антон]

флекс, у крайних ширина 0, flex-basis одинаковый, разрешено растягивание, у центрального ширина фиксирована

[Ankhena]

Простой современный вариант это грид. 4 колонки. Всё.

Альтернативы:
- абсолюты
- calc

[Антон Вебсайтовский]

Ankhena, кстати насчет абсолюты, да уже думал, но подумал, вроде это метод очень старый ) и есть что-то современное.

Значит грид, 4 колонки, 2 колонки как я сделал, на заднем плане, а еще две я так понимаю поверх но по центру 1200px.

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

[Антон Вебсайтовский]

С бграундом конечно все проще, если без картинки, но не мой вариант.

background: linear-gradient(to bottom, rgb(30,87,153) 50%,rgb(125,185,232) 50%);

[Ankhena]

Антон Вебсайтовский, 1fr 600px 600px 1fr

[Антон Вебсайтовский]

Ankhena, результат с абсолюты, но есть но, адаптивное же все должно быть, задние блоки должны растягиваться по контенту где текст, то есть без height: 200px;, если убрать, то все выходит за рамки задних блоков.

Ну и конечно же верхний блок, который 1200px,
left: 50%;
margin-left: -650px;

Так как там у меня у центрального блока
max-width: 1300px;
min-width: 280px;

Для адаптации это убожество, не правильно пропорции учитывает.

https://codepen.io/AXOT/pen/WNmRBpo

[Антон Вебсайтовский]

Ankhena, по поводу (1fr 600px 600px 1fr), в моем случае не 600px, а 50% для задних блоков, а поверх, тот что центральный, да 600px, а будет ли оно адаптивно, вот в чем вопрос. И как грид поверх сделать других грид блоков.

[Ankhena]

Антон Вебсайтовский, Антон, дело в том, что 600 + 1fr это 50% родителя...

И как грид поверх сделать других грид блоков.

Самое простое расположить их в коде в нужном порядке. Если никак, то обычный z-index.
И не грид поверх грида. А всего один грид.
Пройдите уже gridgarden.

а будет ли оно адаптивно

В вашем распоряжении vw, clamp, min, max, гридовый min-max и т.д. Ну и media, если совсем туго.

[Ankhena]

Антон Вебсайтовский,

результат с абсолюты, но есть но, адаптивное же все должно быть, задние блоки должны растягиваться по контенту где текст, то есть без height: 200px;, если убрать, то все выходит за рамки задних блоков.

Ох, беда...
Контентный блок в потоке.
Абсолютом картинка или псевдо с картинкой, если это не конкретный дом, а украшалка.

left: 50%;
margin-left: -650px;

Абсолюты по центру ставятся трансформом -50%. Если ширину 1200 и отступом.
Если несимметричные блоки, то через calc, но тоже через %
Но не отрицательным фиксированным марджином. Иначе какой там адаптив...

Контентный блок нельзя ставить абсолютом. В нём неизвестное количество текста и, соответственно, неизвестная высота.
А украшалку можно. Либо растянуть по высоте либо через пропорции, чего там больше дизайнеру хочется.

[Ankhena]

Антон Вебсайтовский, Ну и до кучи https://sitist.ru/info-centering-blocks.htm там с примерами

[Антон Вебсайтовский]

Ankhena, вот и я о том же ) что абсолют, уходит спать )

[Антон Вебсайтовский]

Ankhena, ну там не совсем то ) примитивные простые примеры, которые легко сделать.

[Ankhena]

Антон Вебсайтовский, так и ваш такой же

[Антон Вебсайтовский]

Ankhena, Щас попробую подобное сделать, а то нижний ответ с вариантом не совсем подходит, там при адаптации выходит берда полная.

[Антон Вебсайтовский]

Вообщем, старый метод зарешал https://codepen.io/AXOT/pen/OJqQNQg

Answer 1

[Сергей delphinpro]

Как-то так, адаптивно, современно:

Comments

[Антон Вебсайтовский]

Вообщем решение оказалось такое себе, попробовал я, менял по разному но все равно вышло такое себе.
Весь сайт центруется 1200px.

.cnt {
  margin: 0 auto;
  max-width: 1200px;
  min-width: 280px;
  width: 90%;
}

Я реализовал черный блок сверху, представим, что это весь контент сайта, и при адаптации, видим, что блок уходит за рамки.



Схема тут
https://codepen.io/AXOT/pen/OJqQNQg

Надо чтобы блок с текстом не уходил за рамки черного блока сверху. А тополучаеться, что мозаика полная )

[Сергей delphinpro]

Антон Вебсайтовский, не хочу вас обижать, но вы даже не удосужились понять принцип работы. Просто скопировали код...

В моем случае контейнер определяется вот так.

https://codepen.io/delphinpro/pen/VwRQaBj?editors=1100

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

[Антон Вебсайтовский]

Сергей delphinpro, ну почему же, я по мимо того, что взял код и переделал под свои блоки, я менял по разному и пытался сделать то как мне надо.

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

Я думаю блок того не стоит, чтобы коверкать весь сайт, я что-то придумаю, и скину решение сюда.

[Сергей delphinpro]

Антон Вебсайтовский, это не костыль. Это вариант для фиксированных размеров контейнера, по типу bootstrap.

[Сергей delphinpro]

Антон Вебсайтовский, у вас ширина контейнера - 90%
навскидку:

grid-template-columns: 1fr 45% 45% 1fr;

[Ankhena]

Ну либо 5vw 1fr 1fr 5vw
Либо ещё интереснее

--indent: clamp(20px, 5vw, 100px);
grid-template-columns: var(--indent) 1fr 1fr var(--indent);

Вместо clamp может быть min или max

[Антон Вебсайтовский]

Ребята, спасибо, что помогали, я вот изначально хотел же попробовать так ) старый метод зарешал, https://codepen.io/AXOT/pen/OJqQNQg

Ровнялся на верхний красный блок, это так скажем контент который весь идет на сайте, центруется, стиль у него .cnt. При адаптации, ничего не выходит и все адаптируется норма. При адаптации надо будет менять только height: 350px;.

[Антон Вебсайтовский]

Сергей delphinpro, да весь сайт я центрую этим стилем. При адаптации и отступы меньше и меньше становяться слева и справа, давно пришел к такому методу, раньше просто использовал padding-left: 50px и padding-right: 50px, но так приходилось в медиа делать лишние запросы. где уже не 50px отступ надо, а 30, и потом еще меньше 20px.

.cnt {
  margin: 0 auto;
  max-width: 1300px;
  min-width: 280px;
  width: 90%;
}

[Антон Вебсайтовский]

Сергей delphinpro, я возился чет и так и так, не вышло с данным методом, все новое тож не супер идеальное как я понял.

[Ankhena]

Антон Вебсайтовский,

При адаптации надо будет менять только height: 350px;.

Угу. А также при смене контента, при работе автопереводчика страницы и т.д....

Это не контент надо вешать абсолютом. А фоны! И высоту задавать им в процентах от родителя. И не пустыми дивами, а псевдоэлементами.

p.s. не могу смотреть на названия ваших классов. Надеюсь, вы работаете один.

[Антон Вебсайтовский]

Ankhena, когда уровень твой выше станет, я на название классов не обращаю внимание давно, еще когда я совсем ничего не понимал, но тогда я понимал, что смысла в названиях нет, хотя это для школников, подписывать, чтобы понимать ) что во что входит.

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

На фоне и стоит height: 350px. Причем тут контент ), где текст.

[Сергей delphinpro]

Антон Вебсайтовский, в данном случае не имеет значения, чему вы задаете высоту. Важно то, что эта высота ограничивает контент. И даже без адаптации возникает проблема. Просто добавить больше текста и приплыли.

просто добавь контент

Переполнение - это первая проверка в верстке.

PS. Именование на самом деле хромает на обе ноги. Селекторы тоже.

[Антон Вебсайтовский]

Сергей delphinpro, логично, но там не будет много текста, и приходится через медия менять, при адаптации.

Answer 2

[Антон Вебсайтовский]

Решение
https://codepen.io/AXOT/pen/OJqQNQg