Макет фиксированной ширины с двумя колонками по центру страницы
С помощью CSS можно создать макет с двумя колонками, расположен- ными внутри центрированного блока.
Решение
Создание центрированного макета фиксированной ширины, состояще- го из двух колонок, – чуть более сложная задача, чем создание фикси- рованного макета, выровненного по левому краю, или «резинового» ма- кета, поскольку при этом отсутствует абсолютная точка отсчета справа или слева, которую можно использовать для позиционирования эле- ментов по горизонтали. Тем не менее есть несколько способов решения этой проблемы, с помощью которых можно создать страницу, подобную той, что мы увидим на иллюстрации ниже.
Вне зависимости от избранного вами метода HTML-код будет одинако- вым:
chapter09/2col-fixedwidth.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Recipe for Success | Perfect Pizza</title>
<link href=”2col-fixedwidth.css” rel=”stylesheet”
type=”text/css” />
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>Perfect Pizza</h1>
</div>
<div id=”content”>
<h2>Choosing Your Toppings</h2>
<p>Sed nec erat sed sem molestie congue. Cras lacus …</p>
?
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Prepare the Dough</a></li>
<li class=”cur”><a href=”#”>Choose Your Toppings</a></li>
<li><a href=”#”>Pizza Ovens</a></li>
<li><a href=”#”>Side Salads</a></li>
</ul>
</div>
</div>
</body>
</html>
Для решения поставленной задачи проще всего разместить область с контентом и навигационное меню внутри центрированного блока с помощью абсолютного и относительного позиционирования соответ- ственно:
chapter09/2col-fixedwidth.css
body { margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
#wrapper {
position: relative;
width: 760px;
margin-right: auto; margin-left: auto; margin-bottom: 1em;
}
#header {
background-image: url(kitchen.jpg); background-repeat: no-repeat; height: 200px;
position: relative;
}
#header h1 {
margin: 0;
padding: 0.3em 10px 0.3em 0;
text-align: right;
width: 750px;
font-weight: normal;
color: #FFFFFF; font-size: 190%; position: absolute; bottom: 0;
left: 0;
background-image: url(black80percent.png);
}
#content {
margin-left: 250px;
width: 500px;
padding: 0 10px 0 0;
}
#content h2 {
font-size: 120%;
color: #3333FF;
background-color: transparent;
margin: 0;
padding: 1.4em 0 0 0;
}
#content p {
font-size: 80%;
line-height: 1.6;
}
#nav {
position: absolute;
top: 200px; left: 0; width: 230px;
}
#nav ul {
list-style: none; margin: 3em 0 0 0; padding: 0;
border: none;
}
#nav li {
font-size: 85%;
}
#nav a:link, #nav a:visited {
color: #555555;
background-color: transparent;
display: block; padding: 1em 0 0 10px; text-decoration: none; min-height: 40px;
}
#nav a:hover, #nav li.cur a:link, #nav li.cur a:visited {
color: #FFFFFF;
background-image: url(arrow.gif);
background-repeat: no-repeat;
}
Как видно на рис. 9.32, в результате получится достаточно простой ма- кет. Если вы хотите усложнить дизайн страницы, добавив некоторые декоративные элементы – например, задав фоновое изображение для области с контентом или рамку для всего макета, – придется использо- вать другой метод.
В качестве альтернативного варианта можно просто задать свойство
float для меню навигации и для блока с контентом, чтобы они распола-
Рис. 9.32. Центрированный макет с фиксированной шириной
гались с левой и правой стороны центрированного блока соответствен- но. Использование данного свойства дает разработчику возможность гибкого внесения дальнейших изменений в макет, например, если за- тем потребуется добавить блок в нижнюю часть страницы (для этого достаточно задать для него свойство clear со значением both, чтобы он располагался под двумя колонками независимо от их высоты, что не- возможно при их абсолютном позиционировании) или задать для маке- та обрамление. Воспользовавшись преимуществами данного способа, мы добавили рамку вокруг макета:
chapter09/2col-fixedwidth-float.css
body { margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
#wrapper {
position: relative;
width: 760px;
margin-right: auto; margin-left: auto; margin-bottom: 1em;
background-image: url(sidebar.gif);
background-repeat: repeat-y;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
}
#header {
background-image: url(kitchen.jpg); background-repeat: no-repeat; height: 200px;
position: relative;
}
#header h1 {
margin: 0;
padding: 0.3em 10px 0.3em 0;
text-align: right;
width: 750px;
font-weight: normal;
color: #FFFFFF; font-size: 190%; position: absolute; bottom: 0;
left: 0;
background-image: url(black80percent.png);
}
#content { float: right; width: 500px;
padding: 0 10px 0 0;
}
#content h2 {
font-size: 120%;
color: #3333FF;
background-color: transparent;
margin: 0;
padding: 1.4em 0 0 0;
}
#content p {
font-size: 80%;
line-height: 1.6;
}
#nav {
float: left;
width: 230px;
}
#nav ul {
list-style: none; margin: 3em 0 0 0; padding: 0;
border: none;
}
#nav li {
font-size: 85%;
}
#nav a:link, #nav a:visited {
color: #555555;
background-color: transparent;
display: block; padding: 1em 0 0 10px; text-decoration: none; min-height: 40px;
}
#nav a:hover, #nav li.cur a:link, #nav li.cur a:visited {
color: #FFFFFF;
background-image: url(arrow.gif);
background-repeat: no-repeat;
}
#footer { clear: both; font-size: 80%;
padding: 1em 0 1em 0; margin-left: 250px; color: #999999;
background-color: transparent;
}
Результат обработки данного кода показан на рис. 9.33.
Рис. 9.33. Создание центрированного макета фиксированной ширины с рамкой с использованием свойства float
Обсуждение
Чтобы не отвлекаться от основной темы, не будем заниматься заданием свойств для цветового оформления, размера и типа шрифта, сконцен- трировав все внимание на методах создания макета.
В обеих версиях макета мы будем использовать центрированный div, как в примерах, с которыми мы работали в разделе «Центрирование блока на странице». Для него задан ID со значением wrapper:
chapter09/2col-fixedwidth.css или chapter09/2col-fixedwidth-float.css
(фрагмент)
body { margin: 0; padding: 0;
?
}
#wrapper {
width: 760px;
margin-right: auto;
margin-left: auto;
?
}
Результат применения этих стилей показан на рис. 9.34.
Рис. 9.34. Центрирование контента на странице
В разделе «Создание «резинового» макета с двумя колонками, в кото- ром слева расположено меню, а справа – основная область с контентом» мы узнали, что для расположения меню навигации можно использо-
вать абсолютное позиционирование, а во избежание его перекрытия с областью контента последней следует задать большой внешний от- ступ. В данном случае единственное отличие от того примера состоит в том, что навигационное меню должно располагаться внутри центри- рованного блока wrapper, поэтому его нельзя позиционировать на стра- нице абсолютно.
При задании элементу свойства position вместо значения absolute мож- но указать relative – при этом элемент не будет удален из общего по- тока; вместо этого он будет смещен по отношению к своей позиции на странице по умолчанию (однако если никаких параметров смещения указано не будет, он будет отображен как если бы свойство position не было задано). Однако в отличие от элементов, для которых свойство po- sition не задано, относительно позиционированный элемент послужит в качестве системы координат для размещения любого дочернего эле- мента с абсолютным позиционированием.
По сути, позиция элемента, для которого задано свойство position: ab- solute, расположенного внутри элемента со свойством position: relative, будет рассчитываться по отношению к краям родительского элемента. Именно это нам и нужно для позиционирования меню навигации вну- три центрированного блока в данном примере.
Прежде всего следует задать элементу wrapper свойство position со зна- чением relative:
chapter09/2col-fixedwidth.css (фрагмент)
#wrapper {
position: relative; text-align: left; width: 760px;
margin-right: auto;
margin-left: auto;
?
}
Затем позиционируем блок с навигацией абсолютно:
chapter09/2col-fixedwidth.css (фрагмент)
#nav {
position: absolute;
top: 200px;
left: 0;
width: 230px;
}
Наконец, добавим для области с основным контентом внешний отступ, чтобы освободить место для только что размещенного меню навигации:
chapter09/2col-fixedwidth.css (фрагмент)
#content {
margin-left: 250px;
padding: 0 10px 0 0;
}
Такой макет выглядит идеально при условии, что область с основным контентом занимает больше пространства по вертикали, чем панель навигации. К сожалению, абсолютно позиционированный блок nav не может оказывать никакого влияния на высоту блока wrapper, поэтому если область с контентом будет короче панели навигации, блок wrap- per не сможет вместить все содержащиеся в панели навигации ссыл- ки. Чтобы убедиться в этом на практике, можно добавить для элемен- та wrapper цветную рамку шириной в два пиксела, а на панель навига- ции добавить больше текста, чтобы она превысила область с контентом по высоте. На рис. 9.35 видно, что содержимое панели навигации вы- ходит за пределы элемента wrapper.
Рис. 9.35. Содержимое панели навигации выходит за пределы блока «wrapper»
Другое решение поставленной задачи состоит в использовании плава- ющих блоков. Его сложнее реализовать, но оно позволяет преодолеть указанное ограничение предыдущего метода, и вы сможете добавлять
элементы в нижнюю часть страницы вне зависимости от того, какая из колонок длиннее. Прежде всего разместим блок навигации слева, а блок content – справа с помощью свойства float:
chapter09/2col-fixedwidth-float.css (фрагмент)
#content { float: right; width: 500px;
padding: 0 10px 0 0;
}
#nav {
float: left;
width: 230px;
}
Данный код позволяет получить тот же результат, что и при использова- нии рассмотренного выше метода. Однако теперь при добавлении цвет- ной рамки для элемента wrapper вы увидите, что она обрамляет только
«шапку» страницы. Оберткой wrapper больше ничего не обернуто!
Рис. 9.36. Расположение плавающих блоков справа и слева
Основной причиной использования плавающих блоков послужила необ- ходимость добавления блока в нижнюю часть страницы. Для этого в код документа под плавающими блоками нужно добавить следующее:
chapter09/2col-fixedwidth-float.html (фрагмент)
<div id=”nav”>
<ul>
<li><a href=”#”>Prepare the Dough</a></li>
<li class=”cur”><a href=”#”>Choose Your Toppings</a></li>
<li><a href=”#”>Pizza Ovens</a></li>
<li><a href=”#”>Side Salads</a></li>
</ul>
</div>
<div id=”footer”>© 2009 Recipe for success</div>
</div>
</body>
</html>
После обновления страницы вы увидите, что теперь рамка блока wrap- per окружает весь контент страницы, как показано на рис. 9.37. Дело в том, что после удаления плавающих блоков из основного потока эле- ментов там остался единственный элемент – блок footer, отодвинутый плавающими блоками в левый нижний угол блока wrapper.
Если для блока footer задать свойство clear со значением both, то он бу- дет размещен ниже обоих плавающих блоков, и потому wrapper вместит и панель навигации, и контент, причем неважно, какой из элементов окажется длиннее. Текущий вид страницы показан на рис. 9.38:
chapter09/2col-fixedwidth-float.css (фрагмент)
#footer {
clear: both;
?
}
Рис. 9.37. Страница после добавления блока footer
Рис. 9.38. Для блока footer задано свойство clear: both
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Информирование поисковой системы Google о подборках страниц (0)
- Позиционирование блока с контентом (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание колонки, занимающей все доступное пространство по высоте (0)
- Добавление тени к блоку (0)
- Создание макета с тремя колонками средствами CSS (0)
- Добавление к «резиновому» макету нижнего блока (0)