Представление для нашего Web‑сайта, часть 5

Давайте создадим контейнер с прокруткой для вывода основного содержимого Web‑страницы. Точнее, переделаем уже созданный контейнер cmain.

Что нам для этого потребуется? Во‑первых, задать для данного контейнера абсолютное значение высоты, а лучше – и ширины, и высоты. Во‑вторых, определить соответствующее поведение при переполнении.

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

Выпишем список параметров контейнеров cnavbar и cmain.

Для контейнера cnavbar:

– ширина – 240 пикселов;

– высота – 620 пикселов;

– выравнивание – по левому краю. Для контейнера cmain:

– ширина – 780 пикселов;

– высота – 620 пикселов;

– выравнивание – по левому краю;

– поведение при переполнении – появление полос прокрутки.

Размеры контейнеров автор определил в результате экспериментов. Он постарался выбрать такие значения, чтобы пространство Web‑страницы было занято максимально полно, а полосы прокрутки у самой Web‑страницы отсутствовали. Скорее всего, вам придется подобрать другие значения размеров.

Кроме того, мы задали одинаковую высоту у обоих контейнеров – и cnavbar, и cmain. Это нужно для того, чтобы исключить некоторые нежелательные эффекты, которые могут возникнуть, если мы создадим у контейнеров рамки или изменим цвет фона (о создании рамок речь пойдет в главе 11 ).

Осталось воплотить наши требования к контейнерам в CSS‑код. В листинге 10.6 приведен исправленный фрагмент таблицы стилей main.css, создающий стили, со‑ ответствующие контейнерам cnavbar и cmain.