2023-02-20 15:39:31
Если бы у меня был такой код, то я бы...
... проблем при верстке не знал бы
Что мы тут имеем (кроме симпатяги-котика)?
Казалось бы - обычный блок для ГК, где есть обложка и контент с формой. И чего это Аня заговорила об этом?
Проблема начинается в подложке и в том, что рядом с формой есть еще другой контент, который не должен быть на этой подложке. Однако, строение любого блока с формой такое, что вызываемый стиль блока генерирует контент на всю колонку или весь блок со всеми его элементами.
А это означает, что у нас на подложке будет "логотип+заголовок+форма" либо ничего
Можно пойти по пути объединения двух колонок через стили, но это.... такое себе.
Давайте я покажу вам как можно решить эту задачку с помощью пары строчек кода.
Порядок действий:
Создаем блок
У меня это "Обычная форма", на которую установлена обложка и смещен сам контейнер по линейке на 6/12
Этому блоку я задаю класс for_header
Стилизуем форму
Здесь делаете что хотите и как хотите. У меня задан фон контейнера, скругления и цвет самой кнопки в стилях формы.
Иконки - это псевдоэлементы для полей.
Создаем новый блок, который будет генерировать "верхний контент".
В моем случае - это обычный блок с заголовком и картинкой. Стили для этих элементов можно положить в отдельный css блок или в стили того блока, что с формой.
И присваиваю класс header_block
Пишем js
$(document).ready(function(){
$('.for_header .modal-block-content').prepend($('.header_block .builder'));
$('.header_block').remove();
});
Суть скрипта в том, чтобы получить значение builder из блока header_block и подставить его к форме (for_header .modal-block-content). Затем удалить "оболочку" от того, где был перемещаемый контент.
Чтобы перемещаемый контент не мелькал в моменте загрузки страницы, можно использовать дополнительно на шаге 3 класс view-collapsed - он скроет контент от пользователя, но оставит в режиме редактирования
это решение можно использовать почти всегда, когда хочется объединить разрозненный контент
641 views12:39
А
