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

Представление для нашего 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.

Листинг 10.6

#cnavbar { width: 240px; height: 620px; float: left }

#cmain { width: 780px; height: 620px; float: left; overflow: auto }

Внесем эти исправления в таблицу стилей, сохраним ее и проверим, что получилось. А получилось у нас то, что показано на рис. 10.3.

Рис. 10.3. Web-страница index.htm, содержащая контейнер с прокруткой, в Web-обозревателе

Рис. 10.3. Web-страница index.htm, содержащая контейнер с прокруткой, в Web-обозревателе

У нас получилась на Web-странице этакое "окошко", содержимое которого можно прокручивать независимо от всего остального. Многие ли Web-сайты могут этим похвастаться?..

Теперь давайте изменим размеры окна Web-обозревателя. И наш красивый и современный Web-дизайн превратится невесть во что…

В части III мы узнаем, как менять размеры контейнеров в ответ на изменение размеров окна Web-обозревателя с помощью специального поведения. А пока что вернем прежние размеры окна. И закончим с контейнерным Web-дизайном.

Что дальше?

В этой главе мы узнали о разных контейнерах: блочных, плавающих и с прокруткой, контейнерном Web-дизайне и атрибутах стиля, задающих различные параметры контейнеров. Контейнеры — вот настоящие "герои" этой главы!

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