ГЛАВА 21. Свободно позиционируемые элементы Web-страницы
В предыдущей главе мы познакомились с Web-формами и элементами управления, HTML-тегами для их создания и средствами объектов Web-обозревателя и библиотеки Ext Core для работы с ними. На основе этих элементов управления и базы данных мы создали систему поиска для своего Web-сайта. Наш небольшой Web-сайтик теперь выглядит просто шикарно!
Только вот поиск у нас вышел какой-то корявый, больше похожий не на готовое решение, а на экспериментальный 'прибамбас', который со временем переделают во что-либо более приемлемое (или уберут совсем). Давайте сами посмотрим на него критическим взглядом.
— Контейнер с полосой навигации — не лучшее место для Web-формы поиска. То, что она нарушает дизайн Web-страницы, не страшно — задать для нее подходящее представление не составит для нас труда. Хуже другое — полоса навигации в какой-то момент станет слишком большой, не поместится в контейнер, Web- форма 'уедет' вниз, и посетителю, чтобы до нее добраться, придется пользоваться полосами прокрутки. А ведь он должен догадаться, что Web-форма поиска еще присутствует на Web-странице, а не пропала бесследно и невесть куда!
— Низ контейнера с основным содержимым тоже плохо подходит для размещения результатов поиска: основное содержимое может оказаться слишком большим, чтобы поместиться в контейнер полностью, и посетителю придется пользоваться полосами прокрутки, чтобы добраться до результатов поиска.
— Теперь предположим, что посетитель выполнил поиск, который оказался удачным, и в низу контейнера с основным содержимым появится список с результатами. После этого посетитель снова выполнил успешный поиск, и в низу контейнера с основным содержимым появится еще один список — с результатами нового поиска. Если повторять поиск снова и снова, будут появляться все новые списки с результатами, и так без конца.
В принципе, некоторые из перечисленных проблем можно решить известными нам средствами. Как уже говорилось, для Web-формы мы можем создать представление, 'облагораживающее' ее. Мы способны выявлять, присутствует ли уже в основном содержимом список с результатами поиска, и удалять его; для этого мы можем привязать к списку стилевой класс или дать ему имя, по которому сможем его найти.
Но куда выводить результаты поиска, чтобы посетитель сразу их увидел? Напрашивается вывод: создать на Web-странице еще один блочный контейнер, поместить в него Web-форму и туда же выводить результаты поиска. Но дополнительный контейнер займет определенное место на Web-странице, может быть, слишком много места. А значит, останется меньше пространства для остальных контейнеров.
Мы можем сделать этот контейнер изначально небольшим, ровно таким, чтобы вместить только Web-форму. Если же поиск увенчается успехом, мы увеличим размер контейнера, чтобы он вместил список с результатами. Но тогда остальные контейнеры будут 'ездить' по Web-странице туда-сюда, чем немало развеселят посетителей. Хорошее настроение — оно, конечно, замечательно, но все равно это не выход.
Свободно позиционируемые контейнеры
Давайте вернемся назад, к языкам HTML и CSS, и посмотрим, не предложат ли они нам что-либо, радикально решающее эту проблему. Так и есть!
Понятие свободно позиционируемого элемента Web-страницы
Откроем любую из созданных нами ранее Web-страниц и посмотрим на нее. Что мы видим?
Прежде всего, расположением элементов этих Web-страниц управляет сам Web-обозреватель. При этом он руководствуется следующими правилами.
— Элемент выводится на экран в том месте, в котором находится определяющий его HTML-код. Так, контейнер cheader мы определили в самом начале HTML-кода Web-страницы index.htm, поэтому он будет выведен в самом ее начале, т. е. в верхней части.
— Если для элементов задано значение none атрибута стиля float (см.
— При других значениях атрибута стиля float элементы выстроятся по горизонтали. Пример: контейнеры cnavbar и cmain, для которых мы задали значение left атрибута стиля float.
Произвольно управлять местоположением элементов Web-страницы в этом случае мы не можем. Поэтому такие элементы называются
Web-дизайнерам и особенно Web-программистам такое положение дел не нравилось. Именно поэтому уже довольно давно в языке CSS появилась возможность создавать
Подобный элемент может располагаться где угодно на Web-странице, независимо от места в HTML- коде, где стоит определяющий его тег.
Рассмотрим особенности свободно позиционируемых элементов Web-страницы.
— Местоположение свободно позиционируемого элемента задается произвольно в виде горизонтальной и вертикальной координат его верхнего левого угла. Координаты задают относительно верхнего левого угла родителя данного элемента.
— Под свободно позиционируемый элемент на Web-странице место не выделяется.
— Свободно позиционируемые элементы находятся 'выше' обычного содержимого Web-страницы, как бы 'плавают' над ним и перекрывают его.
— Свободно позиционируемые элементы могут перекрывать друг друга. Обычное содержимое Web- страницы свободные элементы перекрывают в любом случае.
— Слово 'перекрывают' в предыдущих двух пунктах обозначает, что содержимое Web-страницы, находящееся под свободным элементом, не будет видно — его скроет свободный элемент.
— Свободно позиционируемые элементы могут иметь любое содержимое, в том числе и другие свободно позиционируемые элементы.
Существующая реализация CSS позволяет сделать свободно позиционируемыми только блочные контейнеры. В этом случае говорят о
Создание свободно позиционируемых элементов
Свободные элементы Web-страницы создают с помощью особых атрибутов стиля CSS, которые мы сейчас рассмотрим.
Самый важный атрибут стиля — position. Он задает способ позиционирования элемента Web- страницы:
position: static|absolute|relative|fixed|inherit
Этот атрибут стиля может принимать четыре значения:
— static — контейнер непозиционируемый (поведение по умолчанию);
