Школа
Веб-разработка

Типовые решения в вёрстке. Как сверстать плашку с текстом и фоном

11 мар 2021
👁 13263   🗩4
Веб-разработка

Типовые решения в вёрстке. Как сверстать плашку с текстом и фоном

11 мар 2021
👁 13263   🗩4
Юрий Мазурский
Разработчик и дизайнер
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Допустим, вам нужно сверстать этаж‑плашку с изображением на фоне, с заголовком и текстом внутри.

Есть несколько распространённых ошибок при вёрстке таких этажей:

  1. Отступы ставятся у внутренних элементов плашки, вместо внутренних отступов у самой плашки.

  2. Фон изображения ставится элементом img, вместо фона плашки.

Возьмём этаж из совета про обёртку для страницы и немного изменим его:

ХТМЛ‑код такого этажа предельно прост, здесь не нужно ничего изобретать:

<div class="banner">
  <h1>Межпланетный диабаз: основные моменты</h1>
  <p>Рейтинг притягивает онтогенез речи, независимо от психического состояния пациента. Аффинное преобразование, например, дает осциллятор. Сверхпроводник отталкивает погранслой.</p>
</div>

Стилизуем плашку. Внутренние поля плашки — свойство плашки, поэтому их нужно задавать здесь же, а не у внутренних элементов:

.banner {
  min-height: 390px;
  padding: 50px 50px 100px 30px;
  border-radius: 20px;
  color: #fff;
}

Мы не задаём никаких ограничений размеров плашки, кроме минимальной высоты. Ширина — ответственность обёртки страницы, а высота может плавать, в зависимости от содержимого. Если у вас на плашке железобетонно зафиксированный текст, а плашка должна быть какой‑то определённой высоты, то можно задать.

Добавим изображение как фон плашки:

.banner {
  min-height: 390px;
  padding: 50px 50px 100px 30px;
  border-radius: 20px;
  color: #fff;
  background-color: #cacaca; // цвет фона
  background-image: url("/src/images/splash.jpg"); // путь к изображению
  background-repeat: no-repeat; // не повторять изображение ни по горизонтали, ни по вертикали
  background-position: 50% 100%; // расположить изображение по центру и прижать к низу элемента
  background-size: cover; // вписать изображение в контейнер, чтобы не было зазоров
}

Можно сократить:

.banner {
  min-height: 390px;
  padding: 50px 50px 100px 30px;
  border-radius: 20px;
  color: #fff;
  background: #cacaca url("/src/images/splash.jpg") no-repeat 50% 100% / cover;
}

Содержимое плашки может быть каким угодно и это никак не должно влиять на плашку, кроме изменения высоты. Поэтому добавим условные стили, которые подойдут под наш макет:

h1 {
  max-width: 740px;
  margin: 0 0 40px;
  font-size: 48px;
  line-height: 50px;
  font-weight: normal;
}

p { max-width: 740px; margin: 0 0 20px; }

Вот и всё. Результат на Кодсендбоксе.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Алексей Самохин

> Если у вас на плашке железобетонно зафиксированный текст, а плашка должна быть какой‑то определённой высоты, то можно задать.

Железобетонно зафиксированный текст бывает только в случае, когда этот текст на страницу вставлен картинкой.

В общем случае верстальщик не контролирует ни содержание текста (даже если текст не меняет автор документа, пользователь может смотреть страницу через переводчик), ни его точное отображение конкретным браузером (т. к. могут быть особенности рендеринга шрифтов и даже в отдельных случаях увеличение конкретно текста).

Следовательно, задача на HTML‑вёрстку не может ставиться в формате «плашка (с текстом как текстом) должна быть какой‑то определённой высоты».

Хорошая практика для верстальщика — не использовать свойство height примерно никогда.

Юрий Семенцов

А почему использование img является ошибкой? Ведь в этом случае у нас будет пара преимуществ: от нативного лэйзи‑лоуда до более семантической поддержки темплейта, если генерировать эти плашки динамически.

Евгений Удод

Не использовать height — одно из лучших «тупых правил», которое стоит применять верстальщикам. Жёстко фиксированная высота блока — крайне редкий случай и, как правило, озвучивается дополнительно.

Хорошо, если в цикле появится совет о «перенаполнении» и Юрий покажет, как фиксированная высота ломает страницу.

Ещё нужно предусмотреть обрезку, когда в плашку помещают чересчур большой текст.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы