x
 
Тимур Арефьев
24 августа 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Очень часто у страницы есть несколько блоков, имеющих задний фон шириной в 100% и несколько блоков без заднего фона. При этом их ширина всегда ограничена и они центрируются.

Выходит, что контейнер должен иметь ширину 100% и каждый блок нужно ограничивать по ширине отдельно. Как это удобно оформлять в вёрстке?


Допустим, у нас есть страница, состоящая из этажей. Содержательная часть каждого этажа занимает определённую долю ширины окна браузера. Но фон каждого этажа при этом может дотягиваться до краёв окна. Например:

Экранированный
кристалл

Вещество, в рамках ограничений классической механики, восстанавливает нестационарный осциллятор. Вселенная эксперментально верифицируема. Течение среды усиливает электрон. Призма вращает газ.

При наступлении резонанса атом сжимает фронт. Расслоение масштабирует барионный фонон. Волновая тень, в согласии с традиционными представлениями, сжимает пульсар. Исследователями из разных лабораторий неоднократно наблюдалось, как поверхность мономолекулярно тормозит экситон. Атом тормозит торсионный взрыв.

Погранслой, если рассматривать процессы в рамках специальной теории относительности, исключен по определению. Расслоение, даже при наличии сильных аттракторов, концентрирует эксимер, однозначно свидетельствуя о неустойчивости процесса в целом. Квант исключен по определению. Гетерогенная структура неустойчиво искажает плоскополяризованный фотон. В ряде недавних экспериментов возмущение плотности однородно стабилизирует коллапсирующий кристалл почти так же, как в резонаторе газового лазера.

Гравитирующая сфера
Руста Кулматова

Если страница резиновая, можно просто задать каждому этажу нужные поля:

.header,
.content,
.footer {
  padding-left: 5%;
  padding-right: 5%;
}

Если таких блоков много, можно использовать служебный класс и применять его к этажам

/* style.css */
.holder {
  padding-left: 5%;
  padding-right: 5%;
}<!-- index.html -->
<div class="header holder">
  <!-- ... -->
</div>

<div class="content holder">
  <!-- ... -->
</div>

<div class="footer holder">
  <!-- ... -->
</div>

Такой способ не подойдёт, если содержимое страницы занимает фиксированную ширину и, следовательно, размер полей неизвестен. В этом случае можно создать служебный блок и оборачивать в него содержимое на каждом этаже:

/* style.css */
.holder {
  width: 900px;
  margin: auto;
}<!-- index.html -->
<div class="header">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

<div class="content">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

<div class="footer">
  <div class="holder">
    <!-- ... -->
  </div>
</div>

Содержимое будет ограничено с помощью блока .holder, а фон или рамки можно задавать родительскому блоку:

.header {
  background: url('trees.jpg');
}

.footer {
  border-top: 1px solid lightgray;
}
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

3 Как понять, что наступил момент назвать цену? 3 1 Как вести себя с человеком, который Джима Кемпа не читал и вину не признаёт? 2