просмотрим вариант разработки двухколонного макета с помощью абсолютного позиционирования. При таком варианте одна колонка располагается как обычно, а координаты второй колонки задаются относительно верхнего правого или левого угла окна браузера. Поскольку слой заданный абсолютно накладывается поверх остального содержимого объекта, то под него требуется оставить место путем добавления отступов. На рис. 1 показан вид web-страницы, когда меню располагается в правой колонке, а основной контент — в левой.
Рис. 1. web-страница с навигацией в правой колонке
Для разработки подобных колонок используем два слоя, стиль которых приведен в примере 1.
Пример 1. Двухколонный макет
<style type="text/CSS (ЦСС)">
#leftcol {
margin-right: 211px; /* Отступ справа */
}
#rightcol {
position: absolute; /* Абсолютное позиционирование */
right: 0; /* Положение от правого края окна */
top: 30px; /* Положение от верхнего края */
width: 200px; /* Ширина колонки */
}
</style>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
Для левой колонки задаем отступ слева через параметр margin-right, он включает в себя ширину правой колонки, ее положение от правого края окна браузера плюс расстояние между колонками. Для правой колонки устанавливаем абсолютное позиционирование с помощью атрибута position: absolute, а положение самого слоя управляется параметрами right и top. Их значения подбираются опытным путем в зависимости от вида макета и желания разработчика.
Нижнее закругление в правой колонке делается при помощи рисунка. Вначале готовим подходящее изображение с прозрачным участком, как показано на рис. 2.
Рис. 2. Картинка для разработки закругления внизу колонки
Ширина Имаги должна быть несколько больше ширины колонки, это связано с тем, что в разных браузерах ширина колонки может незначительно различаться. Поэтому и требуется сделать небольшой «запас».
Прозрачность, помеченная на рисунке шахматным полем, необходима для быстрого и удобного изменения цвета фона колонки. Зеленым цветом на данном рисунке обозначен цвет фона web-страницы. Чтобы на границе совмещения цветов не возникал паразитный оттенок, рекомендуется отключить сглаживание и установить только два цвета — прозрачный и фона. За счет этого получается характерная «лесенка», которая хорошо заметна при увеличении Имаги (рис. 3).
Рис. 3. Увеличенный фрагмент картинки
В примере 3 приведен стиль для добавления рисунка к нижней части колонки.
Пример 3. Рисунок в качестве фона
#rightcol {
background:
#edeed5 /* Цвет фона колонки */
url(/images/bg.gif) /* Путь к фоновому рисунку */
bottom right /* Располагаем рисунок по нижнему правому краю слоя */
no-repeat; /* Отменяем повторение фона */
padding: 5px; /* Поля вокруг содержимого слоя */
padding-bottom: 35px; /* Отступ снизу */
}
За счет того, что в рисунке использовалась прозрачность, цвет колонки легко менять через универсальный атрибут background. С помощью него же задается путь к изображению и его положение относительно края слоя. По умолчанию фон повторяется по вертикали и горизонтали, так что требуется отключить эту возможность через аргумент no-repeat. К нижнему краю контента колонки также необходимо добавляем отступ паpaметром padding-bottom, ведь нижняя граница скругленная и контент не должен на нее «наступать».
Окончательный код для разработки двухколонного макета, показанного на рис. 1, приведен в примере 4.
Пример 4. Двухколонный макет
При создании подобного макета, следует принимать во внимание, что слой с абсолютным позиционированием накладывается поверх остальных элементов объекта. Поэтому в данном примере содержимое правой колонки меньше, чем левой. Иначе меню отобразилось бы поверх «подвала» web-страницы, что выглядит нелогично и некрасиво.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект