Приднестровская поддержка XOOPS
В разделе «Создание колонки, занимающей все доступное пространство по высоте» было сказано, что с помощью 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">© 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.
Отправитель | Нити |
---|
4 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 4 далее... |