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

Пример:

#cmain { overflow: auto }

Мы задали для контейнера cmain такое поведение, когда при выходе содержимого за границы контейнера в нем появятся полосы прокрутки.

Здесь нужно сказать еще вот что. Атрибут стиля overflow имеет смысл только в том случае, если мы зададим для высоты контейнера абсолютное значение. При указании относительного значения высоты контейнера он всегда будет увеличиваться в размерах для того, чтобы вместить все содержимое, как будто для атрибута стиля overflow задано значение visible:

#cmain { height: 500px; overflow: auto }

Вот теперь контейнер cmain при необходимости обзаведется полосами прокрутки.

А в следующем примере атрибут стиля overflow можно не указывать — контейнер cmain всегда будет вести себя так, будто для упомянутого атрибута стиля задано значение visible:

#cmain { height: 50 %; overflow: auto }

Атрибуты стиля overflow-x и overflow-y задают поведение контейнера при выходе содержимого за пределы его границ, соответственно, по горизонтали и вертикали. Доступные значения у них те же, что и у атрибута стиля overflow:

#cnavbar { width: 270px; overflow-x: hidden }

Пользуясь только что изученными атрибутами стиля, мы можем создать на Web-странице контейнеры с прокруткой! Это обычные контейнеры с большим содержимым, для просмотра которого предусмотрены полосы прокрутки. Их преимущество в том, что посетитель, прокручивая содержимое такого контейнера, не затрагивает все остальные фрагменты Web-страницы (заголовок 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 }

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

indented { padding-left: 2cm; padding-right: 2cm }

Мы можем привязать такой стиль к абзацу и посмотреть, что получится.

Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

— Если указано одно значение, оно задаст величину отступа со всех сторон элемента Web-страницы.

— Если указаны два значения, первое установит величину отступа сверху и снизу, а второе — слева и справа.

— Если указаны три значения, первое определит величину отступа сверху, второе — слева и справа, а третье — снизу.

— Если указаны четыре значения, первое задаст величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Пример:

TD, TH { padding: 2px }

indented { padding: 0cm 2cm 0cm 2cm }

Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

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

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

Пример:

H1 { margin-top: 5mm }

Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм.

В качестве значений внешних отступов допустимы отрицательные величины:

UL { margin-left: -20px }

В этом случае Web-обозреватель создаст "отрицательный" отступ. Такой прием позволяет убрать отступы, создаваемые Web-обозревателем по умолчанию, например, отступы слева у больших цитат и списков.