dyfran
@dyfran

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

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

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

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

Войти через TM ID
Похожие вопросы
24 окт. 2018, в 01:07
35000 руб./в месяц
24 окт. 2018, в 00:19
3000 руб./за проект