Как лучше это верстать?

Question

[Лев Александров]

Здравствуйте. Взгляните на блок меню на скринах.
Мне нужен совет, как лучше это организовать, т. к. ситуация не стандартная.
На декстопе казалось бы все просто: делаем 3 блока и каждому задаем один и тот же background image.
Но если взглянуть на адаптив, то часть меню переходит в нижний блок, а другая в верхний.
На декстопе шапка табов в одном блоке, а в адаптиве она вместе с меню.

Comments

[Лев Александров]

Стоит ли сделать один большой блок и задать repeat по y для изображения? Но тогда табы не будут гарантированно зафиксированы внизу картинки

[Aetae]

Нихрена не видно на твоих милипиздрических картинках.
Но абстрактное решение в лоб - на мелком разрешении скрывать табы сверху, показывать то что нужно мобильное. Т.е. дублировать их, скрывая тот или иной вариант.

[Aetae]

Ты от том что bg лежит не ровно? Ну так на макете также же?..

[Роман Дворянов]

Стоит ли сделать один большой блок и задать repeat по y для изображения

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

[Лев Александров]

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

[Лев Александров]

Роман Дворянов, просто по макету табы как бы стоят внизу картинки. А если на сайте что съедет то и табы уедут. То есть они никпк не связаны будут с этой картинкой

[Aetae]

Лев Александров, только на скринах этого не видно.
Ну запихни всё в один flex-wrap контейнер: и айтемы меню и "слово шефа"(его с width: 100%). При минималном разрешении ставь "слову шефа" нужный order. Условно так:

Если я таки понял что у тебя за проблема...

[Роман Дворянов]

Лев Александров, кароч, пускаете картинку с повтором по вертикали, на десктопе - дотягиваете размеры под полученную белую полоску в парочке разрешений, может с размерами бэкграунда поиграйтесь. Если ничего не помогает, а это для заказчика принципиально, идете к дизайнеру и упрощаете

[Роман Дворянов]

И не должно быть для «табов» двух блоков, делайте в одном, по сетке, распишите размеры, флекс или гриды сами расставят нужное количество табов в нужных местах

[wobemah]

Так в чем проблема в итоге тут была, ничего не понял какие тыбы, что с ними не так?

[Лев Александров]

wobemah, да уже все, оказывается, картинку надо было растянуть на три блока и сделать attachment fixed. Дизайнер не мог просто растянуть ее в фигме

[wobemah]

Лев Александров, спасибо что держите меня в курсе!

Answer 1

[Саид Шукуров]

Здравствуйте, это не так страшно как вам показалось
Это все делается очень просто, а то есть:
допустим вот такой код:

<div class="main">
    <div class="dont__main">
      <div class="div__for__img">
         <img src="путь">
           <img src="путь">
          <img src="путь">
           <img src="путь">
            <img src="путь">
             <img src="путь">
       </div>
    </div>
</div>

Так вот, в таком случае как видите у нас 6 изображений, и тут для адаптива к нам на помощь приходит Flexbox
Мы просто задаем

.dont__main{
display:flex;
flex-wrap:wrap;
}

А остальное, как вы написали про меню и табы, это делается через медиа запросы, к примеру:

<p class="no__mobile">text for decstop, dont show on mobile</p>
<p class="no__pc">text for mobile, dont show on pc </p>

Делаем так:

@media screen and (max-width:767px){
.no__mobile{
display:none; /*и на мобилах текста нету!*/
}
}
/*убираем на пк*/
@media screen and (min-width:999px){
.no__pc{
display:none;/*Пк прощается с текстом*/
}
}
/*Это всего лишь пример того как вы можете сверстать эти секции*/

И все :)
Если вам интересна технология Flexbox то вот вам Шпаргалочка