Рис. 2.13. Давайте-ка изучим детали и измерим ширину внутренних колонок
Что-то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)
#page {
margin: 36px auto;
width: 960px;
}
.blog {
margin: 0 auto 53px;
width: 900px;
}
.blog.main {
float: left;
width: 566px;
}
.blog.other {
float: right;
width: 331px;
}
Отлично.
Мы установили ширину
#page
в
960
пикселей, отцентрировали в ней модуль
.blog
шириной
900
пикселей, задали ширину.
main (566)
и.
other (331)
и наконец-то разместили эти колонки рядом. Результат выглядит шикарно (рис. 2.14).
Рис. 2.14. Мы избавились от ненужных пикселей, и наш дизайн почти готов. Или нет?
И хотя наш макет идеально совпадает с оригинал-макетом, он получился совсем негибким. Фиксированная ширина в
960px
делает нашу страницу совершенно безразличной к изменениям размеров области просмотра. Иными словами, если ширина окна будет меньше 1024 пикселей, перед читателем появится полоса горизонтальной прокрутки (рис. 2.15).
И нас это, мягко говоря, не устраивает.
Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим
От пикселей к процентам
Вместо того чтобы переносить значения в пикселях из оригинал-макета в CSS, мы должны перевести эти размеры в относительные, пропорциональные значения. В результате мы получим сетку, которая будет трансформироваться в зависимости от области просмотра, причем оригинальные пропорции дизайна останутся неизменными.
Давайте начнем с первого элемента
#page
, который содержит наш макет, и попробуем что-нибудь с ним сделать:
#page {
margin: 36px auto;
width: 960px;
}
Противные, гадкие пиксели. Терпеть их не можем!
Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.
#page {
margin: 36px auto;
width: 90 %;
}
Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента
#page
в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (рис. 2.16). И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5 %.
Рис. 2.16. Наш
контейнер изменяется в размерах при любом изменении размера окна браузера
Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль
.blog
. Чуть ранее, когда мы играли с пикселями, то установили следующее правило:
.blog {
margin: 0 auto 53px;
width: 900px;
}
Теперь вместо величины в пикселях мы должны выразить ширину элемента
.blog
в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула
target : context = result
.
Из оригинал-макета мы знаем, что ширина нашего блога должна составлять
900px
. Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента
.blog
. Поскольку блок
.blog
вложен в элемент
#page
, ширина которого в соответствии с оригинал-макетом составляет
960
пикселей, это и есть наш контекст.
Давайте разделим ширину
.blog
(
900
) на его контекст (
960
):
900 / 960 = 0,9375
У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем
93,75 %
и заносим их прямо в CSS:
.blog {
margin: 0 auto 53px;
width: 93,75 %; /* 900px / 960px */
}
(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины (
width
). Это, разумеется, дело вкуса, но я нахожу это очень полезным.)
Итак, с двумя элементами мы разобрались. Но что делать с колонками?
.blog.main {
float: left;
width: 566px;
}
.blog.other {
float: right;
width: 331px;
}
Ширина основной колонки, которая расположена слева, составляет
566px
, ширина же левой колонки равна
331px
. Эти цифры нам тоже придется перевести в проценты. Но прежде чем подставить их в формулу, обратите внимание на то, что контекст изменился. Последний раз мы делили ширину модуля
.blog
на
960
, ширину его контейнера (
#page
). Но поскольку эти блоки вложены в
.blog
, нам нужно делить целевую ширину колонок (
566
и
331
) на ширину их нового контекста, то есть ширину
.blog
(
900
). В результате мы получаем:
566 / 900 = 0,628888889
331 / 900 = 0,367777778
Передвинув запятую на два знака, мы получаем в итоге