by next
Автор блога: | -=NEXT=- |
Все рубрики (1)
Вёрстка (1)
На форуме меня спросили как сделать вёрстку на div-ах в 3 колонки так чтобы при отсутствии модулей в правой, левой или сразу обеих колонках центральная колонка растягивалась на всю ширину. Накидал каркас для шаблона из div-ов, решил выложить тут, вдруг кому тоже понадобится 
Итак код template.php:

Итак код template.php:
Код PHP:
И код css:<?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>
Код 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; }
+17
22 комментария
2080