Оглавление

Создание «резинового» макета: слева – меню, а справа – область с контентом

Сайты с меню слева и большой областью с контентом справа, как на рис. 9.27, крайне часто встречаются в Сети. Рассмотрим способ создания такого макета с помощью CSS.

 

Создание «резинового» макета с двумя колонками с помощью CSS

Рис. 9.27. Создание «резинового» макета с двумя колонками с помощью CSS  (DEMO)

 

Решение
Для достижения показанного на рис. 9.27 эффекта использовались следующая разметка и CSS-код:

 

2col.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>
   <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="2col.css" />
</head>
<body>
   <div id="header">
      <img src="img/logo.png" width="187" height="29" alt="xoops.ws" class="logo" />
      <span class="strapline">Поддержка XOOPS</span>
   </div>
   <div id="content">
      <h1>Что такое XOOPS?</h1>
      <p>XOOPS - это динамический OO ...</p> 
   </div>
   <div id="nav">
      <ul>
         <li><a href="#">Главная</a></li>
         <li><a href="#">Новости</a></li>
         <li><a href="#">Скачать</a></li>
         <li><a href="#">Инструкции</a></li>
         <li><a href="#">Контакты</a></li>
      </ul>
      <h2>Последние новости</h2>
      <ul>
        <li><a href="#">XOOPS 2.6.0 a1</a></li>
        <li><a href="#">Open Server для XOOPS</a></li>
        <li><a href="#">Вывод блоков по ID</a></li>
        <li><a href="#">TDMDownloads 1.62 ru</a></li>
        <li><a href="#">News 1.6.7 ru</a></li>		
      </ul>
    </div>
  </body>
</html>

 

2col.css

body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  border-top: 2px solid #2A4F6F;
}
#header {
  border-top: 1px solid #778899;
  border-bottom: 1px dotted #B2BCC6;
  height: 3em;
}
#header .strapline {
  font: 120% Georgia, "Times New Roman", Times, serif;
  color: #778899;
  background-color: transparent;
  float: right;
  width: 300px;
  text-align: right;
  margin-right: 2em;
  margin-top: 0.5em;
}
#header .logo {
  float: left;
    width: 187px;
  margin-left: 1.5em;
  margin-top: 0.5em;
}
#nav {
  position: absolute;
  top: 5em;
  left: 1em;
  width: 14em;
}
#content {
  margin-left: 16em;
  margin-right: 2em;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav li {
  font-size: 80%;
  border-bottom: 1px dotted #B2BCC6;
  margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
  text-decoration: none;
  color: #2A4F6F;
  background-color: transparent;
}
#nav a:hover {
  color: #778899;
}
#nav h2 {
  font: 110% Georgia, "Times New Roman", Times, serif;
  color: #2A4F6F;
  background-color: transparent;
  border-bottom: 1px dotted #CCCCCC;
}

h1 {
  font: 150% Georgia, "Times New Roman", Times, serif;
}
#content p {
  font-size: 80%;
  line-height: 1.6em; 
}

 

Обсуждение
За основу макета возьмем «шапку», созданную в разделе «Как расположить логотип сайта слева, а слоган – справа?». Добавив немного контента, разместим его внутри блока div с ID content. Меню навигации состоит из двух маркированных списков, расположенных в блоке с ID nav.
Как вы наверняка уже поняли, при отсутствии каких-либо правил позиционирования эти блоки будут расположены под «шапкой» в том же порядке, в котором они следуют друг за другом в документе (как показано на рис. 9.28).

 

 

Отображение контента и навигации без позиционирования

Рис. 9.28. Отображение контента и навигации без позиционирования

 

На данном этапе CSS-код выглядит следующим образом:


body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .slogan {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
width: 300px;
text-align: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}


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

 

#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}


Как видно на рис. 9.29, после добавления этого правила меню располагается поверх текста, поскольку при абсолютном позиционировании оно было удалено из общего потока элементов документа.

 

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

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

 

Позиционирование блока с контентом
Поскольку перед нами стоит задача создания «резинового» макета, нежелательно задавать ширину области с контентом, но, впрочем, это в любом случае не обязательно. Однако в настоящее время область с контентом размещается там, где должно быть меню. Чтобы все встало на свои места, достаточно задать для области с контентом свойство margin, освободив пространство для меню. Результат показан на рис. 9.30.

#content {
margin-left: 16em;
margin-right: 2em;
}


Теперь все элементы расположены аккуратно по отношению друг к другу, и можно перейти к заданию стиля каждого из них с помощью CSS, чтобы получить результат, изображенный на рис. 9.27. Использованная таблица стилей приведена полностью в начале раздела.

 

=====Совет
Использование em для позиционирования блоков с текстом. В качестве единиц измерения для позиционирования элементов документа я использовала em. Это обеспечит пропорциональное изменение размеров блока при изменении пользователем размера шрифта, позволяя избежать перекрытия элементов. Такое решение оптимально для задания ширины блоков и отступов на сайте, содержащем много текстовой информации. Однако если дизайн сайта подразумевает использование большого количества изображений, этот подход следует использовать с осторожностью, ведь изображения не изменяют свой размер наряду с текстом. Если вам необходим точный контроль за распо- ложением элементов на странице, возможно, следует использовать в качестве единиц измерения пикселы.-----

Добавление внешних отступов для области с контентом

Рис. 9.30. Добавление внешних отступов для области с контентом

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