HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Контейнеры с прокруткой — высший шик современного Web-дизайна. Нужно будет и нам создать такие.

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

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

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

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

с контейнерным Web-дизайном.

Что дальше?

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

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

ГЛАВА 11. Отступы, рамки и выделение 

В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых атрибутов стиля CSS. Результат — вполне профессионально созданная Web-страница. Но чего-то в ней не хватает… Какой-то мелочи недостает, чтобы придать Web- странице лоск. Может быть, отступов и рамок? Так давайте же разберемся с атрибутами стиля, с помощью которых задают параметры отступов и рамок! И доделаем наконец нашу Web-страницу.

Параметры отступов

Стандарт CSS предлагает средства для создания отступов двух видов.

1. Отступ между воображаемой границей элемента Web-страницы и его содержимым — внутренний отступ. Такой отступ принадлежит данному элементу Web-страницы, находится внутри его.

2. Отступ между воображаемой границей данного элемента Web-страницы и воображаемыми границами соседних элементов Web-страницы — внешний отступ. Такой отступ не принадлежит данному элементу Web-страницы, находится вне его.

Чтобы лучше понять разницу между внутренним и внешним отступами, давайте рассмотрим ячейку таблицы. Ячейка наполнена содержимым, скажем, текстом, имеет воображаемую границу и окружена другими ячейками.

— Внутренний отступ — это отступ между границей ячейки и содержащимся в ней текстом.

— Внешний отступ — это отступ между границами отдельных ячеек таблицы. Атрибуты стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента Web-страницы:

padding-left|padding-top|padding-right|padding-bottom:<отступ>|auto|inherit

Мы можем указать в качестве величины отступа абсолютное или относительное значение. Значение auto задает величину отступа по умолчанию, обычно оно равно нулю.

В листинге 11.1 мы указали внутренний отступ для ячеек таблицы, равный двум пикселам со всех сторон.

Листинг 11.1

TD, TH { padding-left: 2px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px }