.article
, поэтому используем ширину блока .blog
, то есть 566px
:
.article {
padding: 40px 8.48056537 %; /* 48px / 566px */
}
Вуаля! Гибкая сетка закончена (рис. 2.23).
Рис. 2.23. Гибкие поля и отступы! Ура!
Немного отрицательных значений
Давайте обратим внимание на заголовок даты записи в блоге.
Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной
69px
(вернемся к рис. 2.12). А поскольку дата входит в блок статьи шириной 474px
, мы уже знаем и контекст.Вооружившись этой информацией, напишем небольшой CSS:
.date {
float: left;
width: 14.556962 %; /* 69px / 474px */
}
Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом (рис. 2.24). А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.
Рис. 2.24. Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)
Мы сможем сделать это при помощи отрицательных отступов, причем нам даже не придется менять принцип действий. Как и прежде, все, что нам нужно, – это определить ширину отступа по отношению к ширине контейнера элемента.
На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель (рис. 2.25). Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:
.date {
float: left;
margin-left: -81px;
width: 69 px;
}
Рис. 2.25. Необходимо сдвинуть дату влево на 81px (или соответствующий относительный эквивалент)
Но мы ведь пока еще ни разу не использовали пиксели, так давайте не будем и начинать. И хотя отступ должен быть отрицательным, это не меняет нашу формулу. Мы все еще хотим выразить целевое значение, то есть отступ шириной в
81px
, как процентное отношение от ширины содержащего дату элемента в 474px
. Переставьте запятую, поставьте минус перед числом – и вы получите пропорциональное отрицательное поле:
81 ÷ 474 =.170886076
А теперь откиньтесь на спинку кресла, расслабьтесь и целиком насладитесь моментом: вы впервые создали полностью гибкую сетку (рис. 2.26). Мне хочется пожать вам руку.
Рис. 2.26. Наша гибкая сетка готова. В основе ее вовсе не пиксели, и при этом – никаких компромиссов с эстетической точки зрения
Гибко двигаемся дальше
Я понимаю, что из-за меня вам пришлось заниматься расчетами больше, чем хотелось бы. Я сам всего этого на дух не переношу и потому – поверьте! – искренне вам сочувствую.
Но создание гибкой сетки – это не только математика. Конечно, формула
target ÷ context = result
помогает превратить размеры в процентные отношения, но вообще-то мы должны сломать нашу привычку переносить пиксели из Photoshop напрямую в CSS и сосредоточить наше внимание на пропорциях, заданных в дизайне. Мы должны научиться лучше видеть контекст, в первую очередь пропорциональное отношение между элементом и контейнером.«Резиновая» сетка – это всего лишь основа, первый слой отзывчивого дизайна. Давайте двигаться дальше.
3. Гибкие изображения
Ну что ж, ПОКА ДЕЛА идут неплохо. У нас есть готовая сетка, сложностью которой мы в угоду гибкости не пожертвовали. Должен признаться: когда я в первый раз создал гибкую сетку, я невероятно гордился собой.
Но потом, как это часто случается с веб-дизайнерами, на меня накатило отчаяние. На нашей странице прекрасно смотрятся слова, сам текст без усилий подстраивается под гибкий контейнер. Но и все! Я не знаю, заметили ли вы, но в Интернете встречаются еще и картинки. А в нашей гибкой сетке их пока нет.
Что же произойдет, если мы вставим изображение с фиксированной шириной в гибкий дизайн?
Назад к разметке
Чтобы ответить на этот вопрос, давайте проведем небольшой эксперимент: вставим картинку прямо в модуль блога и посмотрим, как на это отреагирует макет. Но сначала нужно освободить место в разметке.
Помните тот маленький блок для цитаты
blockquote
, так удобно вписавшийся в нашу статью? У нас и так уже слишком много текста, давайте заменим его на изображение:
Lo, the robot walks
Ничего особенного: элемент
img
, за которым следует короткая, но информативная надпись, заключенная в элемент b
. Фактически в этом отрезке я использовал теги figure/figcaption
из HTML5 в качестве названий классов, что способствует созданию крепкой семантической основы.(Внимательные читатели могут заметить, что я использовал элемент
b
, а это несемантический прием. Некоторые дизайнеры в этом случае используют текстовый элемент span
. Что касается меня, то в несемантической разметке мне импонирует лаконичность таких коротких тегов, как b
и i
.)С HTML закончили, давайте перейдем к CSS:
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557 %; /* 12px / 474px */
width: 48.7341772 %; /* 231px / 474px */
}
У нас получилось прекрасное удобное местечко для картинки. Она будет располагаться справа и занимать половину ширины статьи, или четыре колонки гибкой сетки. Разметку и стиль проверили. Понятное дело, что все эти HTML и CSS не нужны, если нет никакой реальной картинки под рукой.
Поскольку я очень хорошо к вам отношусь (почти так же, как к роботам), я потратил некоторое время в Сети, выбирая подходящую картинку, и нашел фантастического робота (рис. 3.1). Преимущество этого изображения, помимо самого робота, конечно, еще и в том, что оно просто огромное. Я его немного обрезал, но не уменьшал, а оставил первоначальное разрешение 655 х 655. Он явно намного больше, чем гибкий контейнер, который будет его содержать. А значит, у нас есть прекрасная возможность посмотреть, как будет вести себя наш гибкий макет.
Загружаем эту огромную картинку на сервер, обновляем страницу – и что мы видим? Отвратительно. Хуже не придумаешь (рис. 3.2).
Рис. 3.1. Вполне подходящее изображение робота, использованное с любезного согласия Джереми Ноубла
Рис. 3.2. Огромное изображение – огромные проблемы
Вообще-то удивляться тут нечему. Макет в принципе в порядке – гибкий контейнер работает как надо, а пропорции колонок остались неизменными. Но из-за того, что изображение шире, чем модуль. figure, то, что не поместилось, попросту вылезло за его пределы. Мы не применили к изображению никаких ограничений, которые бы сочетали его с гибким окружением.
Гибкие изображения
А что если ввести такое ограничение: написать правило, которое не позволит картинкам выходить за ширину их контейнера?
У меня для вас хорошие новости: сделать это проще простого:
img {
max-width: 100 %;
}
Правило, открытое дизайнером Ричардом Раттером (http://bkaprt.com/rwd/11/), накладывает на любое изображение в документе одно невероятно удобное ограничение. Теперь ширина элемента
img
может быть какой угодно, при условии, что она не превышает ширину содержащего его контейнера. В противном случае свойство max-width: 100 %
заставит изображение ограничиться шириной контейнера. И как вы видите, наша картинка прекрасно стала на место (рис. 3.3).
Рис. 3.3. За счет добавления max-width: 100 % мы смогли удержать наше изображение в рамка