Оглавление

Создание макета страницы с помощью CSS-таблиц

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

 

Решение
Понятие CSS-таблиц подразумевает определенные в спецификации CSS 2.1 значения свойства display, относящиеся к элементам таблиц: table, table-row и table-cell. При их использовании HTML-элемент будет вести себя как соответствующий элемент таблицы.

 

СSS-таблицы поддерживаются версиями броузеров не ниже Firefox 2, Opera 9.5, Safari 3, Chrome 1 и Internet Explorer 8. К сожалению, Internet Explorer 6 или 7 не обрабатывает эти значения, поэтому придется решить для себя, насколько важно для вас их использование.

 

С помощью CSS-таблиц можно разместить элементы в сетке, а также решить проблему создания фона по всей высоте страницы. Элемент, для которого задано свойство display со значением table, и его потомки будут отображаться как элементы таблицы, что позволяет нам определять их границы по отношению к соседним элементам.

 

Вернемся к макету фиксированной ширины с двумя колонками и создадим колонку, занимающую все пространство по высоте, не прибегая к описанным ранее хитроумным уловкам. Для элементов приведенного ниже 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>Что такое XOOPS</title>
    <link href="2col-fixedwidth-table.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="main">
    <div id="nav">
       <ul>
        <li><a href="#">Скачать XOOPS</a></li>
        <li class="cur"><a href="#">Скачать модули</a></li>
        <li><a href="#">Скачать темы</a></li>
        <li><a href="#">Документация</a></li>
       </ul>
    </div>
    <div id="content">
    <h2>Что такое XOOPS?</h2>
	<p>XOOPS - это динамический OO  (Объектно-Ориентированный) 
	основанный на открытом исходном коде скрипт  портала, 
	написанный на PHP. XOOPS поддерживает различные базы данных,  
	XOOPS - это идеальный инструмент для создания небольших  
	высоко-динамичных сообществ вэб-сайтов, внутренних порталов компании,  
	корпоративных порталов, web-публикаторов и многого другого.</p>
	<h2>Технические требования:</h2> 
	<ul>
		<li> WWW сервер (Apache, IIS, Roxen, etc)</li>
		<li> PHP 5.2 или выше</li>
		<li> База данных MySQL 5.0 (или выше)</li>
	</ul>     
    <div id="footer">&copy; 2012 Поддержка XOOPS</div>
    </div>
      </div>
    </div>
  </body>
</html>

 

Рис. 9.51. DEMO

 

Как видите, в разметку был добавлен дополнительный блок div с идентификатором main, обрамляющий элементы content и nav. Кроме того, разметка меню навигации расположена в коде перед разметкой области с контентом: единственный недостаток использования CSS-таблиц заключается в необходимости размещения содержимого колонки строго в том же порядке, в котором оно должно отображаться. Теперь не нужно задавать свойство clear: both; для элемента footer, чтобы он отображался ниже всех трех колонок, поэтому его можно разместить внутри основного блока div.

 

В CSS-код достаточно внести лишь несколько изменений. Во-первых, нужно удалить фоновое изображение элемента wrapper, поскольку теперь изображение можно задать для самой колонки; для элемента main нужно задать свойство display со значением table, а для элементов content и nav  со значением table-cell. Теперь фоновое изображение для боковой панели можно задать прямо элементу nav, удалить свойства margin-left и clear для элемента footer, поскольку теперь в них нет необходимости как при создании макета на основе плавающих блоков. Ниже представлен измененный CSS-код:

body {
    background-color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}
#wrapper {
    border-bottom: 1px solid #888888;
    border-right: 1px solid #888888;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left;
    width: 600px;
}

#header {
    background-image: url("img/bg-header.jpg");
    background-repeat: no-repeat;
    height: 120px;
    position: relative;
}
#main {
	display: table;
}
#content {
    display: table-cell;
    padding: 0 10px 0 20px;
    width: 420px;
}
#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 {
    background-image: url("img/sidebar1.gif");
    background-repeat: repeat-y;
    display: table-cell;
    width: 140px;
}
#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/arrow1.gif);
	background-repeat: no-repeat;
}
#footer {  
	font-size: 80%;
	padding: 1em 0 1em 0;
	color: #999999;
	background-color: transparent;
}


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

 

 

 

Описанный метод так и хочется применить на практике, но помните об отсутствии поддержки необходимых свойств броузерами Internet Explorer 6 и 7. Если вы хотите, чтобы сайт корректно отображался в любых броузерах, можно добавить альтернативный код для IE6 и 7 с помощью условных комментариев. Думаю, в будущем все больше сайтов будет создаваться с использованием CSS-таблиц – как только число пользователей Internet Explorer 6 и 7 начнет стремительно уменьшаться. Более подробную информацию об использовании данного метода и адаптации кода для старых броузеров вы найдете в книге, написанной мной совместно с Кевином Янком (Kevin Yank) «Everything You Know About CSS Is Wrong», опубликованной издательством SitePoint.

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