Пример:
#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-обозревателем по умолчанию, например, отступы слева у больших цитат и списков.
