Создание резиновой трехколоночной верстки с использованием отрицательных полей
Часть 1
Существует много способов создать резиновую трехколоночную верстку. Самый простой из них — использование таблиц. Попытаемся отойти от стандартного подхода и создадим «резинку» без единой таблицы.
Для начала создадим разметку HTML. Она будет следующей:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Three-column</title>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="leftsidebar">
<p>Something website's,<br />
what is the best about this theme:</p>
</div>
<div id="content">
In this sweeping history, Steven Marks
tells the fascinating story of how
Russian figures, ideas, and movements
changed our world in dramatic but
often sunattributed ways. On Europe's
periphery, Russia was an early modernizing
nation whose troubles stimulated
intellectuals to develop radical and
utopian alternatives to Western models
of modernity. These provocative ideas
gave rise to cultural and political
innovations that were exported and
adopted worldwide.
</div>
</div>
</div>
<div id="rightsidebar">
<a href="#">SPECIAL SALE</a>
<a href="#">NEW BOOK E-MAILS</a>
<a href="#">NEW IN PRINT</a>
<a href="#">E-BOOKS</a>
<a href="#">SUBJECTS</a>
<a href="#">SERIES</a>
<a href="#">CATALOGS</a>
<a href="#">SAMPLE CHAPTERS</a>
<a href="#">ONLINE BOOKS</a>
</div>
</body>
</html>
Наша задача — создать CSS-правила, с помощью которых мы увидим в браузере три колонки текста, причем серединка будет занимать ширину страницы минус ширину правой крайней и левой крайней колонок, т.е. эта самая серединка будет растягиваться или сжиматься в зависимости от ширины окна браузера. Эта задача будет решена в два счета! Приступим.
Чтобы добится расположения контента в три колонки, будем использовать следующий принцип. Данная разметка была выбрана не зря: она состоит из двух больших блоков wrap и блока rightsidebar.
Внутри блока wrap вложен блок container, а в нем в свою очередь находятся
два блока — content и leftsidebar. Я специально выбрал именно такую разметку, чтобы расположить эти блоки в такой последовательности: блок leftsidebar будет располагаться слева, content — посередине, а блок rightsidebar, соответственно, справа. Именно такая разметка позволит нам достичь этого.
Основное, что необходимо сделать — расположить поочередно пары блоков, начиная с блоков wrap и rightsidebar, в две колонки; тоже самое проделываем с блоками content и leftsidebar — в результате получаем трехколоночный макет. Нельзя также забывать о том, что блок content должен менять свою ширину в зависимости от ширины окна.
Ниже приведен код CSS, позволяющий расположить блоки
wrap и rightsidebar в две колонки (не забываем, что данные стили необходимо поместить
между тэгами <head> и </head> в теле HTML):
<style type="text/css" media="screen">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
}
#wrap {
float: left;
width: 100%;
margin-right: −240px;
}
#container {
margin-right: 240px;
}
#rightsidebar {
width: 240px;
float: right;
}
/*]]>*/
</style>
В результате у вас должно получится следующее.
Поясню подробнее написанное выше. Обнуляем отступы для всего документа. Это поможет избежать нам досадных недоразумений в различных браузерах. Свойство float необходимо для того, чтобы установить
блокам выравнивание (аналогично свойству text-align для текстовых элементов, которое задает выравнивание).
Блок wrap расположим по левому краю, так как все его содержимое будет располагаться левее блока rightsidebar, а последний расположим по правому краю. Очень важно задать ширину блокам, которым мы указываем свойство float: по умолчанию любой блок располагается на всю ширину экрана и поэтому следующий за ним блок будет располагаться ниже. Блоку rightsidebar зададим ширину в 240px (вы в свою очередь, можете задать этому блоку любую другую ширину по вашему усмотрению).
Теперь самое интересное: зададим блоку wrap ширину в 100% и отрицательный внешний отступ в −240px. Этим мы как бы освобождаем место для блока rightsidebar и этот блок, по идее, должен располагаться на одной уровне с блоком wrap. Но так как ширина блока wrap равна 100%, содержимое этого блока будет растягиваться на всю ширину окна. Поэтому(!) был добавлен вложенный блок container, для которого задаем правый внешний отступ в те же 240px. Вот, в принципе, и весь фокус в использовании отрицательных полей.
Работаем дальше. Осталось только расположить блок leftsidebar левее блока content — здесь все гораздо легче. Добавьте в файл нижеследующие правила и получите желаемое:
#leftsidebar {
float: left;
width: 240px;
}
#content {
margin-left: 240px;
}
Поздравляю, мы получили резиновый трехколоночный макет, сравните ваши результаты с этим. В первой части, посвященной этой теме, была создана только структура трехколоночного макета. Во второй части мы зададим дополнительные стили тексту и блокам.
Отправить комментарий