Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Гибкие поля и отступы

Гибкие поля и отступы

Теперь, когда две колонки стоят на своих местах, можно сказать, что мы закончили с основными компонентами нашей гибкой сетки. Изумительно. Замечательно. Великолепно. И все же этого недостаточно: нас ждет работа над деталями.

Не продохнуть…

Наш дизайн уже достаточно гибок, однако он требует серьезного внимания к двум основным деталям. Название блога уехало далеко влево, а две колонки примыкают друг к другу без каких-либо отступов или промежутков. Определенно, нам нужно еще поработать.

(Конечно, на самом деле мы без них страдаем.)

Гибкие поля и отступы

Наша гибкая сетка готова

Гибкие поля и отступы

Наш заголовок отчаянно нуждается в полях

Гибкие поля и отступы

Отступы? Мы не признаем никаких отступов!

Гибкие поля и отступы

Согласно параметрам эскиза, нам нужно задать горизонтальное поле в 48 пикселей с левой стороны заголовка

Ну что ж, давайте начнем с заголовка. В оригинальном макете между началом заголовка и левым краем контейнера есть промежуток в 48 пикселей. Мы, конечно, могли бы задать поле (padding-left) в пикселях или em:

.lede {

padding: 0.8em 48px;

}

Это хорошее решение. Но это фиксированное значение левого поля (padding-left) создаст промежуток, который не будет сочетаться со всей «резиновой» сеткой. И когда гибкие колонки будут становиться уже или шире, это поле проигнорирует остальные пропорции дизайна, и ширина его всегда окажется 48 пикселей (48 рх), независимо от того, насколько уменьшился или увеличился весь макет.

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

target ÷ context = result

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

1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента.

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

Гибкие поля и отступы

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

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

48 / 900 = 0,0533333333

и переводим результат в:

 .lede {

padding: 0.8em 5.33333333%; /* 48рх / 900рх */

}

Наши 48 пикселей поля теперь выражены в относительных единицах измерения, как доля ширины заголовка.

С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка . blog содержит модуль .article, а правая . other — список .recent-entries.

Гибкие поля и отступы

У заголовка и статьи одинаковые поля

Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (231рх) и ширину содержащей ее колонки (331рх), поэтому можем просто отцентрировать модуль по горизонтали:

.recent-entries {

margin: 0 auto;

width: 69.7885196%; /* 231px / 331px */

}

Co статьей (модуль .article) мы можем поступить так же. Но давайте-ка попробуем кое-что другое.

Помните поле шириной 48рх, которое мы задали в заголовке? Наша статья находится в той же колонке, поэтому вместо того, чтобы размещать ее по центру контейнера, создадим еще один пропорциональный промежуток.

Гибкие поля и отступы

Гибкие поля и отступы! Ура!

Гибкие поля и отступы

Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)

Целевое значение — 48рх. А поскольку мы работаем с относительным полем, в качестве контекста берем ширину самой статьи. Но, опять же, мы не знаем точной ширины модуля .article, поэтому используем ширину блока . blog, то есть 566рх:

.article {

padding: 40рх 8.48056537%; /* 48рх / 56брх */

}

Вуаля! Гибкая сетка закончена. Немного отрицательных значений

Давайте обратим внимание на заголовок даты записи в блоге. Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной 69рх. А поскольку дата входит в блок статьи шириной 474рх, мы уже знаем и контекст.

Вооружившись этой информацией, напишем небольшой CSS:

.date {

float: left;

width: 14.556962%; /* 69px / 474px */

}

Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом. А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.

Мы сможем сделать это при помощи отрицательных отступов, причем нам даже не придется менять принцип действий. Как и прежде, все, что нам нужно, — это определить ширину отступа по отношению к ширине контейнера элемента.

Гибкие поля и отступы

Необходимо сдвинуть дату влево на 81 рх (или соответствующий относительный эквивалент)

На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель. Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:

.date {

float: left; margin-left: -81px;

width: 69 px;

}

Но мы ведь пока еще ни разу не использовали пиксели, так давайте не будем и начинать. И хотя отступ должен быть отрицательным, это не меняет нашу формулу. Мы все еще хотим выразить целевое значение, то есть отступ шириной в 81 рх, как процентное отношение от ширины содержащего дату элемента в 474 рх. Переставьте запятую, поставьте минус перед числом — и вы получите пропорциональное отрицательное поле:

81 ÷ 474 = .170886676

Гибкие поля и отступы

Наша гибкая сетка готова. В основе ее вовсе не пиксели, и при этом — никаких компромиссов с эстетической точки зрения

А теперь откиньтесь на спинку кресла, расслабьтесь и целиком насладитесь моментом: вы впервые создали полностью гибкую сетку. Мне хочется пожать вам руку.

 

Читайте так же:
Not found

Нам доверяют

Интернет магазин