Случай интересный: здесь неудачная верстка не просто портит внешний вид, но и сбивает с толку. С первого взгляда вообще непонятно, как всё устроено. На самом деле структура простая: это четыре способа приема платежей, скомпонованные в четыре колонки. Каждая из колонок начинается иконкой и заканчивается кнопкой. Проблема в том, что текст, общий для первых трех способов, разверстан в ширину и объединен серыми плашками. Из-за плашек возникают сильные горизонтальные связи, и колоночная конструкция рассыпается. Побочный эффект: плашки напоминают кнопки.
Я не буду публиковать пошаговый рассказ, изменений не так уж много:
- Колонки стали похожи на колонки, вертикальное движение не прерывается.
- Общая информация стоит сверху и накрывает те способы, к которым относится (заголовок-шапка).
- Юрлица отделены расстоянием и плашкой.
За бортом остался вопрос о кнопке «Касса для бизнеса», в правом верхнем углу. Непонятно, какое место она должна занимать в структуре, поэтому я и не знаю, как с ней быть. Первое, что приходит в голову, — объединить в группу «Для юрлиц».
Еще эту таблицу можно перевернуть. Такой вариант пригодится, когда способов станет больше (или меньше) и они не поместятся по ширине. Этажам хорошо бы добавить ховер:
Я переделал только конструкцию и немного поправил верстку. Что еще можно улучшить?
Другие переверстки про таблицы:
Тарифы «Контур-Бухгалтерии»
Таблица «Предел огнестойкости строительных конструкций»
Как попасть в «Переверстку»
Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.Правила рубрики и все выпуски
