Разделить страницу на 4 части, нестандартно __?

Question

[VelTemLo]

Как разделить стрАнницу на 4 части, точнее, получается что это 6 частей?

ШАПКА
_______________________________

Левая часть | Правая часть

________________________________
ФУТЕР

Видите, по центру ДЕЛИМ ПОПОЛАМ СТРАНУ, а снизу и сверху идет СПЛОШЬ

Answer 1

[Сергей delphinpro]

Стесняюсь спросить: а что здесь нестандартного?
Я вам кажется уже отвечал по этой теме.
Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?

Comments

[VelTemLo]

Серый, ты отвечал, да, но толку-то с этого? Там подвязка на несколько сторон сразу, и невозможно отдельно изменить, к примеру вверх, к примеру низ
Мне нужно чтобы вверх был ОТДЕЛЬНОЙ высоты, как и низ, а не, извиняюсь, КВАДРОкоптер

[Сергей delphinpro]

VelTemLo, хорошо. Поясните, что такое "отдельная" высота? Накину другие варианты.

Совет: лучше оперировать общепринятой терминологией, а не изобретать свою. Либо подробно объяснять обычными словами, возможно иллюстрируя свои хотелки.

spoiler

[VelTemLo]

Сергей delphinpro, ОТДЕЛЬНАЯ = отличная от.

[Сергей delphinpro]

VelTemLo, отличная от чего?

[VelTemLo]

Сергей delphinpro, ну вот к примеру, чтобы можно было срегулировать отдельно, вот, height шапки - выше-ниже.
height от футера также: выше-ниже. регулировка. они должни быть разных height а не одной как квадрат где все стороны равны. вот...

[Сергей delphinpro]

VelTemLo, Вы хотите в коде задавать произвольные значения? Задавайте. Я на скрине выше показал, где это.
Или вы хотите мышкой двигать границу и менять размеры блоков?

[VelTemLo]

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

[VelTemLo]

Сергей delphinpro, А вот я вспомнил в чем тогда проблема была, мне же нужно чтобы ХЕАДЕР и ФУТЕР были РАЗНЫХ цветов! Вот почему я отверг тогда это решение

[Сергей delphinpro]

VelTemLo, O_o
ну уж цвета-то поменять не должно было быть проблемой..

[VelTemLo]

Да, но просто оно завязано сразу на 2 как близнецы:

.top, .footer {
background: black;
color: white;
padding: 1rem;
grid-column: span 2;
}

Я пытался по отдельности, их разъединить, типа:
.top {
background: black;
color: white;
padding: 1rem;
grid-column: span 2;
}

.footer {
background: red;
color: white;
padding: 1rem;
grid-column: span 2;
}

Но оно сразу исчезает со страницы тогда, и я не могу понять логики
Понимаю, что нужно изучить детально grid , но без практики учить что-то абсолютно толку нет, имхо

[Сергей delphinpro]

VelTemLo, не знаю, куда оно у вас пропадает...

[Сергей delphinpro]

VelTemLo, для базового изучения css grid воспользуйтесь этой игрой https://cssgridgarden.com/

[VelTemLo]

Сергей delphinpro, Блин, действительно, не так скопировал что ли, ну я дуралей конечно. Благодарю, Серг! Виручил. Кик кик. Если нужна будет помощь, то помогу.

[VelTemLo]

Сергей delphinpro, да, я слышал про эту игру. уже пробовал с телефона даже. обязательно сыграю.

Answer 2

[Daemon23RUS]

Видите, по центру ДЕЛИМ ПОПОЛАМ СТРАНУ, а снизу и сверху идет СПЛОШЬ

Это называется СЕПАРАТИЗИМ, деяние наказумеое.
В случае же HTML посмотрите в сторону bootstrap, там постоянно такое деление происходит, и ваша схема элементарна в реализации.

Answer 3

[Kentavr16]

Лучше учи CSS , а именно флексы и гриды. Эти два инструмента позволят сделать практически какую угодно разметку. Бутстрап точно так же использует эти же флексы и гриды, так что обязательно к изучению. А вот тебе пример как построить твою верстку страниц...

Comments

[VelTemLo]

Здравствуйте. Даже через них это не реализуется: эти 4 стороны НЕ должны быть равны. У каждой стороны СВОЙ размер. Попробую конечно еще, но не уверен что сможется.

Answer 4

[podushka]

Попробуйте сделать контейнер в центре страницы, которому пропишите стиль:
display: flex;
а в этот контейнер поместите 2 блока, каждому пропишите это:
width: 50%;

Comments

[VelTemLo]

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