Задание контекста для пропорциональных элементов

Нам необходимо, чтобы что-то удерживалось на месте и стало контекстом для всех пропорциональных элементов (content, sidebar, footer и т. д.), которые согласно замыслу будут присутствовать в нашем дизайне. Следовательно, нам нужно задать пропорциональное значение для ширины, которую будет иметь <div> с идентификатором #wrapper по отношению к ширине области просмотра. Зададим значение 96% и посмотрим, что будет. Вот измененное правило для элемента <div> с идентификатором #wrapper:

#wrapper { margin-right: auto; margin-left: auto;

Width: 96%; /* Удерживание самого дальнего элемента <div> */

}

А вот как все это будет выглядеть в окне браузера (рисунок 3.1).

Страница, для которой задано пропорциональное значение для ширины

Пока все хорошо! Значение 96% замечательно работает в данном случае, хотя мы могли выбрать 100% или 90% — любое из них, которое показалось бы нам подходящим,

И обеспечить наиболее приятный с эстетической точки зрения дизайн в области просмотра.

Теперь переход от фиксированного макета к пропорциональному будет немного сложнее по мере нашего продвижения вперед. Сначала взглянем на верхний колонтитул. Вспоминаем формулу ширина цели х ширина контекста = результат. Наш элемент <div> с идентификатором #header (цель) располагается в <div> с идентификатором #wrapper (контекст). Следовательно, нужно взять значение ширины нашего элемента <div> с идентификатором #header (цель), равное 940 пикселам, и разделить его на значение ширины <div> с идентификатором #wrapper, которое равно 960 пикселам, в результате чего мы получим 0.979166667. Мы можем преобразовать этот результат в проценты, переместив точку, отделяющую десятичную дробь от целого числа, на два знака вправо, и получить процентное значение ширины, равное 97.9166667%. Добавим его в наш CSS-код:

#header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940х960 */

}

Поскольку элементы <div> с идентификаторами #navigation и #footer имеют одинаковую объявленную ширину, мы можем заменить пиксельные значения их ширины на аналогичные значения в процентах.

И наконец, прежде чем мы снова взглянем на нашу страницу в браузере, займемся элементами <div> с идентификаторами #content и #sidebar. Поскольку ширина контекста осталась прежней (960 пикселов), нам нужно лишь разделить значение ширины нашей цели на показатель ширины контекста. На текущий момент ширина нашего элемента <div> с идентификатором #content составляет 698 пикселов, поэтому, если разделить это число на 960, получится значение 0.727083333. Переместим точку, отделяющую десятичную дробь от целого числа, на два знака вправо и получим 72.7083333% — это ширина элемента <div> с идентификатором #content в процентном выражении. Ширина нашей врезки на данный момент равна 220 пикселам, однако также необходимо принимать во внимание границу шириной 2 пиксела. Я не хочу, чтобы ширина границы справа увеличивалась или уменьшалась пропорционально, то есть она должна остаться 2 пиксела. Для этого мне нужно вычесть эту величину из значения ширины врезки. Таким образом, для нашей врезки я вычел 2 пиксела из значения ее ширины, а затем выполнил вычисление по приводившейся ранее формуле. Я разделил ширину цели (теперь она равна 218 пикселам) на ширину контекста (960 пикселов) и получил 0.227083333. Если переместить точку, отделяющую десятичную дробь от целого числа, на два знака вправо, то получится значение ширины врезки в процентах, равное 22.7083333%. После преобразования всех значений ширины в пикселах в показатели, выраженные в процентах, наш CSS-код будет выглядеть так:

#wrapper { margin-right: auto; margin-left: auto;

Width: 96%; /* Удерживание самого дальнего элемента <div> */

}

#header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940х960 */

}

#navigation { padding-bottom: 25px; margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px; width: 72.7083333%; /* 698х960 */

}

#navigation ul li { display: inline-block;

}

#content { margin-top: 58px; margin-right: 10px; float: right;

Width: 72.7083333%; /* 698х960 */

}

#sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; margin-right: 10px; margin-left: 10px; float: left;

Width: 22.7083333%; /* 218х960 */

}

#footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both;

Width: 97.9166667%; /* 940х960 */

}

На рисунке 3.2 показано, как в результате этого наша страница будет выглядеть

В Firefox с областью просмотра шириной примерно 1000 пикселов.

Измененная страница в браузере Firefox.

Пока все хорошо. Теперь пойдем дальше и заменим все значения, равные 10 пикселам, которые были использованы в коде для задания отступов и полей, на эквивалентные им пропорциональные значения, задействуя прежнюю формулу ширина цели х ширина контекста = результат. Поскольку для всех 10-пиксельных значений имеет место один и тот же контекст с шириной, равной 960 пикселам, в процентном выражении ширина составит 1.0416667% (10 х 960).