Найти на сайте

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

+13
1.95K
  2. Блоги
  3. Как сделать трех колоночный шаблон на DIV

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

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

  1. <?php
  2.     if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
  3.     $inUser = cmsUser::getInstance();
  4. ?>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  7.  
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  10. <?php cmsPrintHead(); ?>
  11. <link href="/templates/шаблон/main.css" rel="stylesheet" type="text/css" media="screen" />
  12. <!--[if lte IE 6]>
  13. 	<link href="/templates/шаблон/ie6.css" rel="stylesheet" type="text/css" />
  14. 	<script type="text/javascript" src="/путь/jquery.iepnghack.1.6.js"></script>
  15. 	<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
  16. <![endif]-->
  17. <!--[if IE 7]><link href="/templates/шаблон/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
  18. <!--[if gt IE 7]><link href="/templates/шаблон/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->
  19. <link rel="shortcut icon" href="/favicon.ico"></link>
  20. </head>
Тут каждый IE подгружает свою css. Все остальные браузеры этого не видят. Так как в IE разных версиях определенные вещи сделаны через Ж. Это не значит что весь основной css необходимо туда вставлять. Только те стили и команды которые надо перекрыть из основной css. Остальное думаю в комментариях не нуждается.

Далее вставляем BODY:
  1.  
  2. <body>
  3. <!-- WRAPPER on  *************************** -->
  4. <div class="wrapper">
  5. 	<!-- HEADER on *************************** -->
  6. 	<div class="header">
  7.                тут будет логотип
  8. 	</div>
  9. 	<!-- HEADER off *************************** -->
  10. 	<!-- CENTER on *************************** -->
  11. 	<div id="centerblock">
  12. 		<div id="contentblock">
  13. 			<?php cmsPathway('»'); ?>
  14. 			<?php cmsModule("top"); ?>
  15. 			<?php cmsBody(); ?>
  16. 			<?php cmsModule("bottom"); ?>
  17. 		</div>
  18. 	</div>
  19. 	<!-- CENTER off *************************** -->
  20. 	<!-- LEFT on *************************** -->
  21. 	<div id="leftblock">
  22. 		<?php if (cmsCountModules("left")) { ?>
  23. 			<?php cmsModule("left"); ?>
  24. 		<?php } ?>
  25. 	</div>
  26. 	<!-- LEFT off *************************** -->
  27. 	<!-- RIGHT on *************************** -->
  28. 	<div id="rightblock">
  29. 		<?php if (cmsCountModules("right")) { ?>
  30. 			<?php cmsModule("right"); ?>
  31. 		<?php } ?>
  32. 	</div>
  33. 	<!-- RIGHT off *************************** -->
  34. 	<div class="cb footer_lock"></div>
  35. </div>
  36. <!-- WRAPPER off  ************************** -->
  37. <!-- FOOTER on ***************************** -->
  38. <div class="footer">
  39. 		<a href="/"><?php cmsPrintSitename(); ?></a> © 2010 - <?php echo date('Y')?>
  40. </div>
  41. <!-- FOOTER off  *************************** -->
  42. </body>
  43.  
Тут в принципе мне все обыно, кому то будет не понятно: Тут Футер всегда прижат к низу, а для поисковиков выдается не: ЛЕВАЯ ЦЕНТРАЛЬНАЯ ПРАВАЯ часть, а наоборот ЦЕНТРАЛЬНАЯ ЛЕВАЯ ПРАВАЯ (в любом случае при такой конструкции поисковику можно будет подсовывать первое то что надо вам, хоть ФУТЕР, таблицами к сожалению такого не сделать :).

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

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

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

  1.  
  2. 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;}
  3. form,input,select,textarea	{margin:0; padding:0;}
  4. select, input			{padding: 2px 5px;}
  5.  
  6. /* GENERAL */
  7. html		{height: 100%;}
  8. body		{height: 100%;}
  9. body,td		{font:400 12px Arial,Tahoma,Verdana; color:#4F4F4F; vertical-align:top;}
  10. a		{font-family:Arial,Tahoma,Verdana; text-decoration:underline}
  11. a:hover         {text-decoration:none}
  12.  
Далее разметка трехколочной страницы с прижатым футер для INSTANTCMS. Высота футера задаеться в двух местах в данном случае высота равна 100px (.wrapper margin-bottom c минусом и .footer, .footer_lock height с плюсом)

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

  1.  
  2. .wrapper	{width:100%; min-height: 100%; height: auto !important; height: 100%; margin-bottom: -100px; position: relative; background-color:#fff;}
  3. .footer		{position: relative;}
  4. .footer, .footer_lock	{height: 100px;}
  5.  
  6. /*Header*/
  7. .header		{height: 259px; padding-top: 11px; }
  8.  
  9. /*MAIN PART*/
  10. #centerblock	{width: 100%; float: left;}
  11. #leftblock	{width: 320px; margin-left:-100%; float: left;}
  12. #rightblock	{width: 235px; margin-left:-235px; float: left;}
  13. #contentblock {margin: 0 235px 0 320px;}
  14. 	#contentblock p		{text-align: justify; margin-bottom: 8px;}
  15. 	#contentblock .btitle	{font-size:18px; padding: 10px 0 2px 0;}
  16. 		.con_text ul		{margin-left: 20px;}
  17. 		.con_text li 		{margin-bottom: 10px; list-style-type:circle;}
  18. 	#body li				{list-style-type:none;}
  19.  
Потом идет CSS от Instantcms и в самом низу css пишем
  1.  
  2. /* SHOT */
  3. .cto, table, select, textarea{width:100%;}
  4. .tl{text-align:left}
  5. .tc{text-align:center}
  6. .tr{text-align:right}
  7. .tj{text-align:justify}
  8. .vam{vertical-align:middle}
  9. .fl {float:left}.fr{float:right}
  10. .b{font-weight:700;}
  11.  
  12. .cb	{clear:both;}
  13. .no	{direction:rtl;unicode-bidi:bidi-override;}
  14. .none	{display:none;}
  15.  
Если есть вопросы пишите. Знаю что ни хрена не объяснил, да и не умею я это делать, но на вопросы отвечу.

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

Код PHP:
	{if $mod.showtitle neq 0}
	{$mod.title}
	{/if}
	{$mod.body}
+1
ГеймОверСистемХалтед ГеймОверСистемХалтед 14 лет назад #
Молодец!
+1
14 лет назад #
+1
+1
14 лет назад #
Кстати, на эту тему есть полезный ресурс: http://www.dynamicdrive.com/style/
+1
14 лет назад #
Есть вопросы...

Почему Вы используете XHTML 1.0 Transitional? - Давно пора переходить на Strict :)
Internet Explorer очень не любит когда что-то выражают в процентах, особенно высоту.
div с классом wrapper я бы задал position: relative; а во всех его дочерних дивах position: absolute; тогда и float не надоsmileа позицию дочерних блоков высчитывать отосительно wrapper` а :)

ЗЫ я в своем шаблоне на дивах для одного очень красивого сайта вообще избавился от написасания доп стилей для каждой версии интернет експлорера и одинаково выглядело во всех браузерах :)
+1
Buck Buck 14 лет назад #
Да нет правил, есть рекомендации. Понятно что одно и то же разные люди будут верстать по разному, и я никому ничего не навязываю, просто на такой структуре только в разных вариациях я делаю. с удовольствием посмотрел бы ваш вариант, причем если понравиться то может возьму его за основу (хотя и этот не громоздкий и во всех браузерах можно делать все что угодно)... Причем я не верстальщик, а PM просто так получилось что пришлось столкнуться и сейчас даже верстальщикам помогаю... А остальное приобрел на подработках...
+1
-=NEXT=- -=NEXT=- 14 лет назад #
Пробовал и не раз так шаблон сделать на инстант, слишком много косяков. Мой вариант проще, правда работает только на новых версиях браузеров. Долго бился с такими вариантами, в итоге сделал шаб на дивах, но присвоил им табличные значения, работает очень неплохо, косяков не видел smile

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.