www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Фиксированный дизайн. Размещение трех колонок

Фиксированный дизайн. Размещение трех колонок

контентовая версия  

Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Сюда входит применение параметра position совместно с параметрами left и top. Аналогично верстке двухколонного макета разделяют два подхода: с абсолютным и относительным позиционированием элементов.

Абсолютное позиционирование

При абсолютном размещении слоев их положение жестко фиксируется относительно края окна браузера и не меняется при изменении его размеров. Надо учитывать, что один слой может накладываться на другой, перекрывая его содержимое. Поэтому следует учитывать размеры слоев и их позицию с тем, чтобы нужная информация была видна.

Основное достоинство абсолютного позиционирования — в удобстве определения местоположения элементов. Это напоминает аппликацию, когда мы точно знаем, куда и как надо поместить нужный фрагмент картины.

К недостаткам данного подхода можно отнести недостаточную гибкость и строгую привязку к координатной сетке. Чтобы пристроить любой элемент, необходимо точно знать расстояние от него до края браузера по горизонтали и вертикали, что не всегда можно определить. Поэтому приходится прибегать к помощи скриптов на языке JavaScript, позволяющих вычислять нужную дистанцию, а это приводит к усложнению тегов. Несмотря на описанные особенности, в определенных ситуациях указанный метод вполне резонно применять.

просмотрим как создать три колонки, как показано на рис. 1, используя абсолютное позиционирование.

Рис. 1. Пример разработки трех колонок

Рис. 1. Пример разработки трех колонок

В модульной сетке на рис. 1 задействовано шесть слоев, выделенных разным цветом. Стиль данного макета можно условно поделить на две части — первая часть описывает оформление и вид элементов, а вторая — их положение. Заголовки к каждому блоку назовем title1, title2, title3, где число обозначает номер колонки, а col1, col2, col3 — соответственно названия самих колонок с контентом. Местоположение слоев задается параметрами left и top, которые определяют расстояние по горизонтали и вертикали от левого верхнего угла окна браузера до левого верхнего угла слоя. Значения этих параметров указываются с учетом ширины слоев и расстояния между ними. При этом обязательно в стиль слоя для атрибута position следует добавляем значение absolute (пример 1).

Пример 1. Использование абсолютного позиционирования

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Абсолютное позиционирование</title>
<style type="text/CSS (ЦСС)">
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
 font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
 font-weight: bold; /* Жирное начертание контента заголовка */
 font-size: 80%; /* Размер шрифта */
 color: white; /* Цвет контента заголовка */
 width: 200px; /* Ширина колонок */
 border: 1px solid black; /* Рамка вокруг слоя */
 position: absolute; /* Абсолютное позиционирование */
 top: 30px; /* Положение от верхнего края */
 padding: 5px; /* Поля вокруг контента */
}

#col1, #col2, #col3 { /* 2 */
 font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
 font-size: 100%; /* Размер шрифта */
 font-weight: normal; /* Нормальное начертание */
 color: black; /* Цвет контента */
 top: 60px; /* Положение от верхнего края */
}

/* Цвет фона каждого слоя */
#title1 { background: #b38541; }
#title2 { background: #008159; }
#title3 { background: #006077; }
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }

/* Положение каждого слоя */
#title1 { left: 20px; }
#title2 { left: 225px; }
#title3 { left: 430px; }
#col1 { left: 20px; }
#col2 { left: 225px; }
#col3 { left: 430px; }
</style>
</head>
<body>

<div id="title1">Заголовок 1</div>
<div id="title2">Заголовок 2</div>
<div id="title3">Заголовок 3</div>
<div id="col1">Колонка 1</div>
<div id="col2">Колонка 2</div>
<div id="col3">Колонка 3</div>

</body>
</html>

Стиль, обозначенный единицей, устанавливает параметры оформления заголовков, а также ширину всех слоев и тип позиционирования. Стиль, отмеченный двойкой, определяет шрифт и его начертание для основного контента. Цвет для каждого слоя и его положение задается отдельно.

Относительное позиционирование

При относительном позиционировании слои привязаны друг к другу, но их общее положение на странице может быть любым. Тем самым макет допустимо размещать по центру страницы или выравнивать по одному из краев браузера. Это дает широкие возможности по созданию web-страниц. Фактически, верстка на основе слоев построена преимущественно на использовании относительного позиционирования элементов.

При создании двух колонок, левому слою необходимо задать абсолютное положение, а правому — относительное. Это наиболее универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. Обязательно следует сместить второй слой по горизонтали с помощью параметра left на величину, равной ширине левого слоя. В противном случае слои будут накладываться друг на друга.

Описанный метод работает только с двумя колонками и добавление третьей колонки приводит к смещению слоя. Результат получается совершенно невостребованным. Чтобы поправить положение, необходимо снова вернуться к двум колонкам. Для этого следует объединить две левые колонки, поместив их внутрь дополнительного слоя. Результат манипуляций показан на рис. 2.

Рис. 2. Способ размещения слоев

Рис. 2. Способ размещения слоев

Вновь созданный слой с именем tr выступает в роли одной колонки, поэтому можно применить тем же методом, что и в случае макета с двумя слоями. А именно, для слоя tr следует задать абсолютное положение, а для слоя col3 — относительное. Схема вложенности слоев и способ позиционирования приведены в примере 2.

Пример 2. Размещение слоев для разработки трех колонок

<div id="tr" style="position: absolute">
   <div id="col1" style="position: absolute">...</div>
   <div id="col2" style="position: relative">...</div>
</div>

<div id="col3" style="position: relative">...</div>

Смещение слоев по горизонтали и вертикали относительно друг друга управляется аргументами параметров left и top и зависит от ширины колонок и пробелов между ними (пример 3).

Пример 3. Использование относительного позиционирования

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Относительное позиционирование</title>
<style type="text/CSS (ЦСС)">
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
 font-family: Verdana, Arial, sans-serif;
 font-weight: bold;
 font-size: 80%;
 color: white;
 width: 200px;
 border: 1px solid black;
}

#col1, #col2, #col3 { /* 2 */
 font-family: "Times New Roman", Times, serif;
 font-size: 100%;
 font-weight: normal;
 color: black;
}

#col1, #title1 { /* 3 */
 position: absolute;
}

#col2, #title2 { /* 4 */
 position: relative;
 left: 205px;
}

#col3, #title3 { /* 5 */
 position: relative;
 left: 410px;
}

#col1, #col2, #col3 { /* 6 */
 top: 5px;
}

.tr { /* 7 */
 position: absolute;
}

p {
 margin: 5px;
}

#title1 { background: #b38541; }
#title2 { background: #008159; }
#title3 { background: #006077; }
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }
</style>
</head>
<body>

<div class="tr">
 <div id="title1"><p>Чебурашка</p></div>
 <div id="title2"><p>Гена</p></div>
</div>
<div id="title3"><p>Шапокляк</p></div>
<div class="tr">
 <div id="col1"><p>...</p></div>
 <div id="col2"><p>...</p></div>
</div>
<div id="col3"><p>...</p></div>

</body>
</html>

В данном примере стили, обозначенные номерами 1 и 2, управляют оформлением колонок и заголовков, а также их шириной. Стили с 3 по 5 задают положение колонок относительно друг друга. Стиль с номером 6 регулирует расстояние между блоком заголовка и блоком контента под ним.

Статья опубликована: 24.04.2009 Последнее обновление: 03.04.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления контента содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой.

font-size
Определяет размер шрифта элемента, который может быть установлен несколькими способами.

left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на web-странице.

top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект