Попался непростой дизайн для верстки, сайт будет адаптивный, хотя дизайн изначально под это не был рассчитан.
Никак не могу решить, как правильно сверстать нижнюю часть. В правой и левой колонке фоном идет рисунок (рипитится по вертикали) и часть этого рисунка по замыслу дизайнера должна выступать за границу сайта. В принципе, это можно сделать и отрицательным маржином, но придется убирать выравнивание высоты колонок, потому, что необходимый для выравнивания overflow:hidden, не дает блоку с картинкой вылезти за границу сайта. С помощью before и after тоже не получается (абсолютное позиционирование не дает репититься рисунку). Проблема на декстопной версии сайта решилась увеличением общей площади контейнера и центрированием верхних элементов, тогда у нижних колонок с выступающим рисунком остается больше места. Но обнаружилась другая проблема. С уменьшением разрешения экрана ширина желтого блока и нижней части уменьшается неравномерно. Нижняя часть становиться значительно меньше по ширине, чем желтый блок. Потому, что на больших экранах она была больше. Может быть, немного путанно объясняю, но как мне сделать выступ рисунка за границы колонок и при этом сохранить равномерное уменьшение ширины верхних блоков сайта на малых экранах?
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
troll31
Попался непростой дизайн для верстки, сайт будет адаптивный, хотя дизайн изначально под это не был рассчитан.
Никак не могу решить, как правильно сверстать нижнюю часть. В правой и левой колонке фоном идет рисунок (рипитится по вертикали) и часть этого рисунка по замыслу дизайнера должна выступать за границу сайта. В принципе, это можно сделать и отрицательным маржином, но придется убирать выравнивание высоты колонок, потому, что необходимый для выравнивания overflow:hidden, не дает блоку с картинкой вылезти за границу сайта. С помощью before и after тоже не получается (абсолютное позиционирование не дает репититься рисунку). Проблема на декстопной версии сайта решилась увеличением общей площади контейнера и центрированием верхних элементов, тогда у нижних колонок с выступающим рисунком остается больше места. Но обнаружилась другая проблема. С уменьшением разрешения экрана ширина желтого блока и нижней части уменьшается неравномерно. Нижняя часть становиться значительно меньше по ширине, чем желтый блок. Потому, что на больших экранах она была больше. Может быть, немного путанно объясняю, но как мне сделать выступ рисунка за границы колонок и при этом сохранить равномерное уменьшение ширины верхних блоков сайта на малых экранах?
Привожу код. который у меня получился.
Не найду, где можно загрузить скриншот.
Заранее благодарю за любую подсказку!!!
Edited by troll31Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.