Иллюстрированный самоучитель по Dreamweaver MX
Свободно позиционируемый абзац текста на странице 11.1.htm
Теперь рассмотрим таблицу стилей. В ней мы использовали множество новых атрибутов, которые сейчас и рассмотрим.
Этот атрибут делает элемент страницы свободно позиционируемым:
position: absolute;
Запомните его — он обязательно должен присутствовать в определении стиля любого свободного элемента. Если у вас что-то не работает, прежде всего, проверьте, задали ли вы для данного атрибута соответствующее значение.
У обычного фиксированного элемента названный атрибут установлен в значение static. Это же его значение по умолчанию.
Эти атрибуты задают, соответственно, горизонтальную и вертикальную координаты левого верхнего угла свободного элемента:
left: 50; top: 50;
В данный момент они заданы в пикселах, хотя вы можете использовать любую из поддерживаемых CSS единиц измерений. Имейте в виду, что данные атрибуты имеют силу только для свободно позиционируемых элементов, т. е. тех, у которых атрибут position установлен в значение absolute.
Примечание
Запомните, что координаты свободно позиционируемого элемента отсчитываются относительно родителя, а не относительно окна Web-обозревателя. Поскольку в нашем случае родителем является сама-страница, это несущественно, но вообще об этом забывать не следует.
А эти атрибуты задают, соответственно, ширину и высоту свободно позиционируемого элемента:
width: 200; height: 100;
Они также даны в пикселах, хотя могут быть заданы в любой другой из поддерживаемых CSS единиц измерения. И также имеют силу только у свободно позиционируемых элементов.
А теперь взгляните еще раз на рис. 11.1. Вы видите, что высота нашего свободного элемента заметно больше ста пикселов (сравните ее с шириной). Дело в том, что по умолчанию свободный элемент растягивается по вертикали, если его содержимое в нем не помещается. А у нас как раз такой случай. (Как уже говорилось, вы можете задать другое поведение, но об этом позже.)
background-color: #00FF00;
Здесь специально задан зеленый фон для свободно позиционируемого элемента, чтобы он был заметнее.
А теперь держитесь крепче! Добавлением всего одной строки в таблицу стилей мы превратим свободно позиционируемый элемент в небольшую "страничку в странице" (добавленный текст выделен полужирным шрифтом).
#para {position: absolute; left: 50; top: 50; width: 200; height: 100;
background-color: #OOFFOO; overflow : scroll }
Сохраните новый файл под именем 11.2.htm и откройте его в Web-обозревателе. И как оно вам (рис. 11.2)?
Давайте еще раз взглянем на добавленную нами строку:
overflow: scroll
overflow — атрибут, как раз и задающий поведение свободно позиционируемого элемента, когда его содержимое в нем не помещается. Значение по умолчанию — auto — заставляет элемент растягиваться по вертикали, что мы и наблюдали в предыдущем случае. А значение scroll заставляет элемент отобразить полосы прокрутки.
