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

Фиксированный дизайн. Параметр float

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

просмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега <DIV> для разработки слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать две колонки. Для решения данной задачи есть два подхода: первый основан на использовании параметра float, второй — на позиционировании элементов.

Использование параметра float

Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым параметром float со значением left. Этот элемент говорит, что слой необходимо выровнять по левоой стороне и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.

Теоретически, параметр float дастаткова задавать лишь для одного слоя из двух. Однако браузер Internet Эксплорер в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Файер фох накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).

Пример 1. Добавление параметра float

Валидный 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 (ЦСС)">
#leftcol { /* Левая колонка*/
 width: 200px; /* Ширина слоя */
 float: left; /* Состыковка с соседним слоем */
 color: white; /* Цвет контента*/
 padding: 10px; /* Поля вокруг контента */
 background: #008000; /* Цвет фона левой колонки */
}

#rightcol { /* Правая колонка*/
 width: 550px; /* Ширина слоя */
 float: left; /* Состыковка с соседним слоем */
 padding: 10px; /* Поля вокруг содержимого */
 background: #e0e0e0; /* Цвет фона правой колонки */
}
</style>
</head>
<body>

 <div id="leftcol">...</div>
 <div id="rightcol">...</div>

</body>
</html>

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

Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.

Рис. 1

Рис. 1. Вид макета при уменьшении размера окна браузера

Чтобы подобная ситуация не происходила, следует применить параметром margin.

Добавление параметра margin для разработки двухколонного макета

Опять воспользуемся параметром float, чтобы расположить колонки рядом, но добавим его только для первого слоя. При этом в стиле второго слоя следует установить параметр margin-left, значение которого равно ширине левой колонки. Но здесь есть одна хитрость — ширину правой колонки задавать нельзя, потому что это приведет к переносу блоков в браузере Internet Эксплорер при уменьшении окна браузера. А именно этого мы стараемся избежать. Поэтому общую ширину макета установим с помощью еще одного слоя, назовем его container, а остальные слои будут располагаться внутри него (пример 2). В этом случае ширину правой колонки можно не задавать, поскольку она будет занимать все доступное пространство.

Пример 2. Двухколонный макет

Валидный 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 (ЦСС)">
#container {
 width: 750px; /* Общая ширина колонок */
}

#leftcol { /* Левая колонка*/
 width: 200px; /* Ширина слоя */
 float: left; /* Состыковка с соседним слоем */
 color: white; /* Цвет контента*/
 background: #008000; /* Цвет фона левой колонки */
}

#rightcol { /* Правая колонка*/
 background: #e0e0e0; /* Цвет фона правой колонки */
 margin-left: 200px; /* Отступ слева */
}

p {
 padding: 10px; /* Поля вокруг контента */
 margin: 0; /* Убираем отступы */
}
</style>
</head>
<body>

<div id="container">
 <div id="leftcol"><p>...</p></div>
 <div id="rightcol"><p>...</p></div>
</div>

</body>
</html>

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

Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевой параметр clear. Дело в том, что браузеры по-разному располагают этот нижележащий слой, поэтому следует отменить действие обтекания, что clear как раз и делает (пример 3).

Пример 3. Применение параметра clear

Валидный HTML

<!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>
</head>
<body>

<div id="container">
 <div id="leftcol">...</div>
 <div id="rightcol">...</div>
</div>

<div style="clear: left">...</div>

</body>
</html>

Стиль для данного примера останется неизменным и только добавляется тег <DIV> с тегом clear: left. Значение этого параметра обычно совпадает со значением float.

Резюме

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

Такой способ разработки многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевой атрибут margin-left, добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.

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

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

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

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

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

clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

margin-left
Устанавливает величину отступа от левого края элемента.

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

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

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

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