dyfran
@dyfran

Как сверстать такой header?

Я джун в верстке и наткнулся на странный и старый макет header'а и никак не могу толком решить, как его правильно и не костыльно сверстать.
5a32608c16b3f769022578.png

Левая и правая часть разных высот, а в центральной вообще перепад, но именно с ней (центральной) еще более менее понятно. С флексами не дружу, поэтому думал сверстать инлайн блоками, расположить их в ряд, у левого и правого сделать ширины 100%, у центрально 1024px (как и надо), но из-за свойств инлайна я не могу задать разные высоты и получается они просто пустые.
Какие толковые варианты тут могут быть? А то уже плавлюсь сижу)
  • Вопрос задан
  • 375 просмотров
Пригласить эксперта
Ответы на вопрос 3
  • @maxsnw
    по правой и левой части, думаю, что это все же дизайнерский промах ибо никакой нагрузкой и творческим высером дизайнера тут и не пахнет. На счет центра, так вынеси это отдельным блоком с этим бэкграундом и задай позиционирование относительно хедера. либо оверфлоу визибл дай хедеру, что б показывались все вылезающие за его границы элементы. а вообще вот ссылка на этот макет в рабочем варианте https://online.rdb.ru, открой инспектор и позыркай как там и что, но стороны все же одинаковые :)
    Ответ написан
  • politon
    @politon
    HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
    Здесь в принципе только ого можно оставить картинкой или в svg перевести
    Остальное с помощью css псевдоклассами и бордерами
    По высотам - padding и позиционирование
    Ответ написан
  • @Baldr-ZWS
    верстаешь центральный блок, ему задаешь псевдоэлементы before - левая часть, after правая и задаешь им абсолютное позиционирование, ну и высоты им можешь разные задать
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы