Верстка на DIV

Автор блога: Buck
Все рубрики (1)

Как сделать трех колоночный шаблон на DIV

Краткое введение в DIV:

Начнем Ваш HEAD обратите внимание стандарт XHTML 1.0 Transitional.

Код PHP:
<?php
    if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
    $inUser = cmsUser::getInstance();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<?php cmsPrintHead(); ?>
<link href="/templates/шаблон/main.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if lte IE 6]>
	<link href="/templates/шаблон/ie6.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/путь/jquery.iepnghack.1.6.js"></script>
	<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
<![endif]-->
<!--[if IE 7]><link href="/templates/шаблон/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if gt IE 7]><link href="/templates/шаблон/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->
<link rel="shortcut icon" href="/favicon.ico"></link>
</head>
Тут каждый IE подгружает свою css. Все остальные браузеры этого не видят. Так как в IE разных версиях определенные вещи сделаны через Ж. Это не значит что весь основной css необходимо туда вставлять. Только те стили и команды которые надо перекрыть из основной css. Остальное думаю в комментариях не нуждается.

Далее вставляем BODY:
Код PHP:
<body>
<!-- WRAPPER on  *************************** -->
<div class="wrapper">
	<!-- HEADER on *************************** -->
	<div class="header">
               тут будет логотип
	</div>
	<!-- HEADER off *************************** -->
	<!-- CENTER on *************************** -->
	<div id="centerblock">
		<div id="contentblock">
			<?php cmsPathway('»'); ?>
			<?php cmsModule("top"); ?>
			<?php cmsBody(); ?>
			<?php cmsModule("bottom"); ?>
		</div>
	</div>
	<!-- CENTER off *************************** -->
	<!-- LEFT on *************************** -->
	<div id="leftblock">
		<?php if (cmsCountModules("left")) { ?>
			<?php cmsModule("left"); ?>
		<?php } ?>
	</div>
	<!-- LEFT off *************************** -->
	<!-- RIGHT on *************************** -->
	<div id="rightblock">
		<?php if (cmsCountModules("right")) { ?>
			<?php cmsModule("right"); ?>
		<?php } ?>
	</div>
	<!-- RIGHT off *************************** -->
	<div class="cb footer_lock"></div>
</div>
<!-- WRAPPER off  ************************** -->
<!-- FOOTER on ***************************** -->
<div class="footer">
		<a href="/"><?php cmsPrintSitename(); ?></a> © 2010 - <?php echo date('Y')?>
</div>
<!-- FOOTER off  *************************** -->
</body>
Тут в принципе мне все обыно, кому то будет не понятно: Тут  Футер всегда прижат к низу, а для поисковиков выдается не: ЛЕВАЯ ЦЕНТРАЛЬНАЯ ПРАВАЯ часть, а наоборот ЦЕНТРАЛЬНАЯ ЛЕВАЯ ПРАВАЯ (в любом случае при такой конструкции поисковику можно будет подсовывать первое то что надо вам, хоть ФУТЕР, таблицами к сожалению такого не сделать :).

Есть верхушка .header туда можно вставлять всю вашу верхушку или сново 2 дива который будет прижат к левой стороне (лого) и к правой / float: left или float:right соответственно в css для этого у меня есть два класса .fl .fr

Также есть класс .cb (clear:both);

Ну и собственно css Вначале скидываю все что можно скинуть что бы ничего не расползалось, всем картинки были по умолчанию без рамок, таблицы растянуты сразу на 100% по ширине, а в таблицах сразу прижато все к верху, ну и т.п. в css все видно. (Есть сбросы от яху и крутых верстальщиков, но я остановился на своем, методом проб, ошибок и опытами), далее можно будет задать то что вам надо:

Код PHP:
html,body,table,td,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,fieldset,a,img {margin:0; padding:0; border:0; border-spacing:0; border-collapse:collapse; list-style-type:none; background-color:transparent;}
form,input,select,textarea	{margin:0; padding:0;}
select, input			{padding: 2px 5px;}

/* GENERAL */
html		{height: 100%;}
body		{height: 100%;}
body,td		{font:400 12px Arial,Tahoma,Verdana; color:#4F4F4F; vertical-align:top;}
a		{font-family:Arial,Tahoma,Verdana; text-decoration:underline}
a:hover         {text-decoration:none}
Далее разметка трехколочной страницы с прижатым футер для INSTANTCMS. Высота футера задаеться в двух местах в данном случае высота равна 100px (.wrapper margin-bottom c минусом и .footer, .footer_lock height с плюсом)

Если вам надо сделать верхушку 270px а отсуп до логотипа будет 11 сверху то надо прописывать высоту = 259 а отсуп сверху 11. Либо ставить margin-top у внутренних дивов.

Код PHP:
.wrapper	{width:100%; min-height: 100%; height: auto !important; height: 100%; margin-bottom: -100px; position: relative; background-color:#fff;}
.footer		{position: relative;}
.footer, .footer_lock	{height: 100px;}

/*Header*/
.header		{height: 259px; padding-top: 11px; }

/*MAIN PART*/
#centerblock	{width: 100%; float: left;}
#leftblock	{width: 320px; margin-left:-100%; float: left;}
#rightblock	{width: 235px; margin-left:-235px; float: left;}
#contentblock {margin: 0 235px 0 320px;}
	#contentblock p		{text-align: justify; margin-bottom: 8px;}
	#contentblock .btitle	{font-size:18px; padding: 10px 0 2px 0;}
		.con_text ul		{margin-left: 20px;}
		.con_text li 		{margin-bottom: 10px; list-style-type:circle;}
	#body li				{list-style-type:none;}
Потом идет CSS от Instantcms и в самом низу css пишем
Код PHP:
/* SHOT */
.cto, table, select, textarea{width:100%;}
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.tj{text-align:justify}
.vam{vertical-align:middle}
.fl {float:left}.fr{float:right}
.b{font-weight:700;}

.cb	{clear:both;}
.no	{direction:rtl;unicode-bidi:bidi-override;}
.none	{display:none;}
Если есть вопросы пишите. Знаю что ни хрена не объяснил, да и не умею я это делать, но на вопросы отвечу.

Да. Сам вывод модулей  выглядит вот так:
Код PHP:
<div class="{$mod.css_prefix}module" >
	{if $mod.showtitle neq 0}
	<div class="btitle">{$mod.title}</div>
	{/if}
	{$mod.body}
</div>
Первая запись в первом в жизни блоге :). Вот сколько их ставил и настраива но никогда сам не постил :)
Чуть не забыл про "любимый" IE6 в css для неё надо прописать
Код PHP:
* html,body {height: 100%;}