Оглавление

Макет фиксированной ширины с двумя колонками по центру страницы

С помощью CSS можно создать макет с двумя колонками, расположенными внутри центрированного блока.

 

Решение
Создание центрированного макета фиксированной ширины, состоящего из двух колонок, – чуть более сложная задача, чем создание фиксированного макета, выровненного по левому краю, или «резинового» макета, поскольку при этом отсутствует абсолютная точка отсчета справа или слева, которую можно использовать для позиционирования элементов по горизонтали. Тем не менее есть несколько способов решения этой проблемы, с помощью которых можно создать страницу, подобную той, что мы увидим на иллюстрации ниже.

 

Вне зависимости от избранного вами метода HTML-код будет одинаковым:


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>Макет с фиксированной шириной</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">
      </div>
      <div id="content">
	<h2>Что такое XOOPS?</h2> 
	<p>XOOPS - это динамический OO ...</p>
      </div>
      <div id="nav">
        <ul>
          <li><a href="#">Главная</a></li>
          <li class="cur"><a href="#">Новости</a></li>
          <li><a href="#">Форум</a></li>
          <li><a href="#">Скачать</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

 

Для решения поставленной задачи проще всего разместить область с контентом и навигационное меню внутри центрированного блока с помощью абсолютного и относительного позиционирования соответственно:

 

2col-fixedwidth.css

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
}
#wrapper {
  position: relative;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1em;
}
#header {
  background-image: url(img/bg-header.jpg);
  background-repeat: no-repeat;
  height: 120px;
  position: relative;
}
#header h1 {
  margin: 0;
  padding: 0.3em 10px 0.3em 0;
  text-align: right;
  width: 600px;
  font-weight: normal;
  color: #FFFFFF;
  font-size: 190%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(black80percent.png);
}
#content {
  margin-left: 110px;
  width: 490px;
  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: 120px;
  left: 0;
  width: 100px;
}
#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(img/arrow.gif);
  background-repeat: no-repeat;
}


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

 

Центрированный макет с фиксированной шириной

Рис. 9.32. Центрированный макет с фиксированной шириной 

 

В качестве альтернативного варианта можно просто задать свойство float для меню навигации и для блока с контентом, чтобы они располагались с левой и правой стороны центрированного блока соответственно. Использование данного свойства дает разработчику возможность гибкого внесения дальнейших изменений в макет, например, если затем потребуется добавить блок в нижнюю часть страницы (для этого достаточно задать для него свойство clear со значением both, чтобы он располагался под двумя колонками независимо от их высоты, что невозможно при их абсолютном позиционировании) или задать для макета обрамление. Воспользовавшись преимуществами данного способа, мы добавили рамку вокруг макета:

 

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
}
#wrapper {
  position: relative;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1em;
  background-image: url(img/sidebar.gif);
  background-repeat: repeat-y;  
  border-right: 1px solid #888888;
  border-bottom: 1px solid #888888;
}
#header {
  background-image: url(img/bg-header.jpg);
  background-repeat: no-repeat;
  height: 120px;
  position: relative;
}
#header h1 {
  margin: 0;
  padding: 0.3em 10px 0.3em 0;
  text-align: right;
  width: 600px;
  font-weight: normal;
  color: #FFFFFF;
  font-size: 190%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(black80percent.png);
}
#content {
  float: right;
  width: 480px;
  padding: 0 10px 0 10px;
}
#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: 100px;
}
#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(img/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.

 

Создание центрированного макета фиксированной ширины с рамкой с использованием свойства float

Рис. 9.33. Создание центрированного макета фиксированной ширины с рамкой с использованием свойства float (DEMO)

 

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

В обеих версиях макета мы будем использовать центрированный div, как в примерах, с которыми мы работали в разделе «Центрирование блока на странице». Для него задан ID со значением wrapper:

 

body {
  margin: 0;
  padding: 0;
  ... 
}
#wrapper { 
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  ... 
}


Результат применения этих стилей показан на рис. 9.34.

 

Центрирование контента на странице

Рис. 9.34. Центрирование контента на странице

 
В разделе «Создание «резинового» макета: слева – меню, а справа – область с контентом» мы узнали, что для расположения меню навигации можно использовать абсолютное позиционирование, а во избежание его перекрытия с областью контента последней следует задать большой внешний отступ. В данном случае единственное отличие от того примера состоит в том, что навигационное меню должно располагаться внутри центрированного блока wrapper, поэтому его нельзя позиционировать на странице абсолютно.

 

При задании элементу свойства position вместо значения absolute можно указать relative – при этом элемент не будет удален из общего потока; вместо этого он будет смещен по отношению к своей позиции на странице по умолчанию (однако если никаких параметров смещения указано не будет, он будет отображен как если бы свойство position не
было задано). Однако в отличие от элементов, для которых свойство position не задано, относительно позиционированный элемент послужит в качестве системы координат для размещения любого дочернего элемента с абсолютным позиционированием.

 

По сути, позиция элемента, для которого задано свойство position: absolute, расположенного внутри элемента со свойством position: relative, будет рассчитываться по отношению к краям родительского элемента.

 

Именно это нам и нужно для позиционирования меню навигации внутри центрированного блока в данном примере. Прежде всего следует задать элементу wrapper свойство position со значением relative:

#wrapper {
  position: relative;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  ... 
}


Затем позиционируем блок с навигацией абсолютно:

#nav {
position: absolute;
top: 120px;
left: 0;
width: 100px;
}


Наконец, добавим для области с основным контентом внешний отступ, чтобы освободить место для только что размещенного меню навигации:

#content {
margin-left: 120px;
padding: 0 10px 0 0;
}


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

 

Содержимое панели навигации выходит за пределы блока wrapper

Рис. 9.35. Содержимое панели навигации выходит за пределы блока «wrapper»

 

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

 

#content {
  float: right;
  width: 480px;
  padding: 0 10px 0 10px;
}
#nav {
  float: left;
  width: 100px;
}

Данный код позволяет получить тот же результат, что и при использовании рассмотренного выше метода. Однако теперь при добавлении цветной рамки для элемента wrapper вы увидите, что она обрамляет только «шапку» страницы. Оберткой wrapper больше ничего не обернуто!

 

Рис. 9.36. wrapper обрамляет только «шапку» страницы. 

 

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

      ...
      </div>
    <div id="footer">&copy; 2009 Recipe for success</div>
  </div>
</body>


После обновления страницы вы увидите, что теперь рамка блока wrapper окружает весь контент страницы, как показано на рис. 9.37. Дело в том, что после удаления плавающих блоков из основного потока элементов там остался единственный элемент – блок footer, отодвинутый плавающими блоками в левый нижний угол блока wrapper.
Если для блока footer задать свойство clear со значением both, то он будет размещен ниже обоих плавающих блоков, и потому wrapper вместит и панель навигации, и контент, причем неважно, какой из элементов окажется длиннее.

 

Текущий вид страницы показан на рис. 9.38:


#footer {
clear: both;
...
}

Страница после добавления блока footer

Рис. 9.37. Страница после добавления блока footer

 

Для блока footer задано свойство clear: both

Рис. 9.38. Для блока footer задано свойство clear: both

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити