by next

Автор блога: -=NEXT=-
Все рубрики (1)
Вёрстка (1)

Вёрстка в 3 колонки

-=NEXT=-
На форуме меня спросили как сделать вёрстку на div-ах в 3 колонки так чтобы при отсутствии модулей в правой, левой или сразу обеих колонках центральная колонка растягивалась на всю ширину. Накидал каркас для шаблона из div-ов, решил выложить тут, вдруг кому тоже понадобится smile
Итак код template.php:
Код PHP:
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } $inUser = cmsUser::getInstance(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- HEAD !-->
<?php cmsPrintHead(); ?>
<link rel="stylesheet" href="/templates/3div/css/style.css" type="text/css" media="screen" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
<!--[if lt IE 7]>
<link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
</head>
<body>
	<div id="wrapper">
    <div id="header">header</div>
		<div class="content-tab">
			<div class="content-tab-row">
				<?php if (cmsCountModules("left")) { ?>
                <div class="tab-cell left"><?php cmsModule("left"); ?></div>
                <?php } ?>
					<div class="tab-cell content">
                	<div><?php cmsModule("top"); ?></div>
					<div><?php cmsBody(); ?></div>
					<div><?php cmsModule("bottom"); ?></div>
                	</div>
				<?php if (cmsCountModules("right")) { ?>
                <div class="tab-cell right"><?php cmsModule("right"); ?></div>
                <?php } ?>
			</div>
		</div>
        <div class="clear"></div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
И код css:
Код PHP:
* {
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
}

#header {
	height: 100px;
	background-color:#333;
}

.content-tab
{
  display: table;
  width: 1000px;
}

div.content-tab div.tab-cell
{
   display: table-cell;
}

div.tab-cell
{
   display: block;
}

div.content-tab-row
{
  display: table-row;
}

.content-tab .left
{
  	width: 200px;
	background-color: #CCC;
        vertical-align:top;
}

.content-tab .content
{
	text-align:justify;
        vertical-align:top;
}

.content-tab .right
{
    width: 200px;
	background-color: #CCC;
        vertical-align:top;
}

.clear {
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
}

#footer {
	height: 50px;
	background-color:#666;
}
+16 22 комментария 1419