Как сделать шаблон темы для Drupal — 2. Три колонки с резиновым центром
…если информация не выводится в одну или обе боковые колонки, то их место занимает центральная колонка. Ниже, почти гирляндовский подход.
template.php
function phptemplate_body_class($sidebar_left, $sidebar_right) {
if ($sidebar_left != '' && $sidebar_right != '') {$class = 'sidebars';}
else {
if ($sidebar_left != '') {$class = 'sidebar-left';}
if ($sidebar_right != '') {$class = 'sidebar-right';}
}
if (isset($class)) {
print ' class="'. $class .'"';}
}
?>page.tpl.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>…</title>
<style>…</style>
</head>
<body>
<div id="header">
<div id="primary-links">…</div>
<div id="logo_name">…</div>
<div id="secondary-links">…</div>
</div>
<div id="container">
<div id="column-left">
<div class="searchbox">…</div>
</div>
<div id="column-center">
<div id="squeeze">…</div>
</div>
<div id="column-right">
<div class="searchbox">…</div>
</div>
</div>
<div id="footer">…</div>
</body>
</html>style.css
#container #column-left {float:left;width:250px;position:relative;z-index:2;}
#container #column-center {float:left;width:100%;position:relative;z-index:1;}
#container #column-right {float:left;width:250px;position:relative;z-index:2;}
body.sidebar-left #column-center {margin-left:-250px;}
body.sidebar-right #column-center {margin-right:-250px;}
body.sidebars #column-center {margin:0px -250px;}
body.sidebar-left #squeeze {margin-left:250px;}
body.sidebar-right #squeeze {margin-right:250px;}
body.sidebars #squeeze {margin:0px 250px;}
#footer {float:none;clear:both;text-align:center;}Всё, что осталось сделать в этом примере, расставить переменные в page.tpl.php.
| Attachment | Size |
|---|---|
| 3k_theme.7z | 1.35 KB |
Comments
что то не получается так сверстать,все равно все блоки друг под другом,подскажите почему
Обновил, + прикрепил архив.
а можно ли убрав правый блок привести его к 2-х колоночному? примерно как у вас?
А он уберется автоматически, если не будете выводит на него информацию, то же касается и левого блока
Потому что на DIV'ах, смотрите в сторону CSS. И пользуйтесь Firebug для Firefox, куча вопросов отпадет. :)
Post new comment