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

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

+17
2.68K
  2. Блоги
  3. Вёрстка в 3 колонки
На форуме меня спросили как сделать вёрстку на div-ах в 3 колонки так чтобы при отсутствии модулей в правой, левой или сразу обеих колонках центральная колонка растягивалась на всю ширину. Накидал каркас для шаблона из div-ов, решил выложить тут, вдруг кому тоже понадобится smile
Итак код template.php:
  1. <?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } $inUser = cmsUser::getInstance(); ?>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <!-- HEAD !-->
  6. <?php cmsPrintHead(); ?>
  7. <link rel="stylesheet" href="/templates/3div/css/style.css" type="text/css" media="screen" />
  8. <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
  9. <!--[if lt IE 7]>
  10. <link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
  11. <![endif]-->
  12. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  13. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  14. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  15. <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
  16. </head>
  17. <body>
  18. 	<div id="wrapper">
  19.     <div id="header">header</div>
  20. 		<div class="content-tab">
  21. 			<div class="content-tab-row">
  22. 				<?php if (cmsCountModules("left")) { ?>
  23.                 <div class="tab-cell left"><?php cmsModule("left"); ?></div>
  24.                 <?php } ?>
  25. 					<div class="tab-cell content">
  26.                 	<div><?php cmsModule("top"); ?></div>
  27. 					<div><?php cmsBody(); ?></div>
  28. 					<div><?php cmsModule("bottom"); ?></div>
  29.                 	</div>
  30. 				<?php if (cmsCountModules("right")) { ?>
  31.                 <div class="tab-cell right"><?php cmsModule("right"); ?></div>
  32.                 <?php } ?>
  33. 			</div>
  34. 		</div>
  35.         <div class="clear"></div>
  36.         <div id="footer">footer</div>
  37.     </div>
  38. </body>
  39. </html>
И код css:
  1. * {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. #wrapper {
  7. 	width: 1000px;
  8. 	margin: 0 auto;
  9. }
  10.  
  11. #header {
  12. 	height: 100px;
  13. 	background-color:#333;
  14. }
  15.  
  16. .content-tab
  17. {
  18.   display: table;
  19.   width: 1000px;
  20. }
  21.  
  22. div.content-tab div.tab-cell
  23. {
  24.    display: table-cell;
  25. }
  26.  
  27. div.tab-cell
  28. {
  29.    display: block;
  30. }
  31.  
  32. div.content-tab-row
  33. {
  34.   display: table-row;
  35. }
  36.  
  37. .content-tab .left
  38. {
  39.   	width: 200px;
  40. 	background-color: #CCC;
  41.         vertical-align:top;
  42. }
  43.  
  44. .content-tab .content
  45. {
  46. 	text-align:justify;
  47.         vertical-align:top;
  48. }
  49.  
  50. .content-tab .right
  51. {
  52.     width: 200px;
  53. 	background-color: #CCC;
  54.         vertical-align:top;
  55. }
  56.  
  57. .clear {
  58.   float: none;
  59.   clear: both;
  60.   margin: 0;
  61.   padding: 0;
  62. }
  63.  
  64. #footer {
  65. 	height: 50px;
  66. 	background-color:#666;
  67. }
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, а нельзя накидать код для верха дефолтовского шаба(с заменой), чтобы там можно было одну картинку вставить(шапку сайта) и убрать "авторизацию" и т.д. То что есть сейчас не совсем удобно менять.
0
-=NEXT=- -=NEXT=- 13 лет назад #
Не совсем понял что именно нужно сделать? Переделать дефолтный под div?
0
[ECHO]ALiDozer [ECHO]ALiDozer 13 лет назад #
Не знаю что имел ввиду Лezginka.ru, но меня этот вопрос интересует smile
0
-=NEXT=- -=NEXT=- 13 лет назад #
Код то достаточно понятен? smile
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, по зарез нужно делать "шапки сайтов", остальное особо можно не менять. Но у дефолта, две таблицы в шапке и ставить одну,цельную, картину(шапку) не получается.
Можно переписать код так, чтобы шапка сайта создавалась из одной цельной картинки.
0
wmaximum wmaximum 13 лет назад #
проблема построить шапку на одном div&#8217;e или я неправильно понял?
0
lezginka.ru lezginka.ru 13 лет назад #
wmaximum, я чайник и в дивАХ не разбираюсь. выше написал, посмотри.
0
-=NEXT=- -=NEXT=- 13 лет назад #
В дефолтном шаблоне достаточно так же в стилях изменить бэкграунд, конкретно тут:
вот этой строке сделай в css бэкграунд и всё
&nbsp;
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, ты бы выложил свою работу как готовый файл, а то не совсем понятно куда добавить код.
+1
-=NEXT=- -=NEXT=- 13 лет назад #
Вот тут шапка ставится: header
В стилях пропиши бэкграунд и все дела т.е. тут:
#header {
height: 100px;
background-color:#333;
}
Ссылка на архив каркаса, поставь как шаблон увидишь в работе:
тут
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, большая просьба,еще раз объясни, с учетом чайниковости.
твои файлы поставить вместо дефолтовских ?
или код добавить в дефолтовский и вместо каких строк ?
0
Alphaweb Alphaweb 13 лет назад #
"...Накидал каркас для шаблона из div-ов..."
Наверное, придётся шаблон мастерить...
0
-=NEXT=- -=NEXT=- 13 лет назад #
Скачай архив и распакуй в папку templates на сайте, далее через админку в разделе настройки дизайн выбери шаблон div3 и посмотришь в работе этот каркас, а так советую посмотреть курсы по блочной вёрстке, тогда вопросов не возникнет
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, то что говоришь, я уже делал, я полный чайник, а свистком laugh
-------------
сможешь код дать,который можно добавить в дефотовский шаб, чтобы наверху (шапка сайта) была как ты и предлагаешь ?
просто поменять код, так можно ?
+2
-=NEXT=- -=NEXT=- 13 лет назад #
Ладно, специально для тебя сделаю дефолт на дивах laugh
0
lezginka.ru lezginka.ru 13 лет назад #
наверняка многие хотят НО МОЛЧАТ laugh
0
lezginka.ru lezginka.ru 13 лет назад #
-=NEXT=-, меня в принципе интересует только "шапка сайта"(если это упрощает задачу)
0
lezginka.ru lezginka.ru 13 лет назад #
Alphaweb, приветствую, давно не виделись.
может заодно и мне ответишь(вопрос выше) ?
0
13 лет назад #
отлично))) просто супер))) то,что надо,можно на любой шаблон натянуть,то,что искал.Спасибо огромное...как раз мне не хватало формулы отображения
0
-=NEXT=- -=NEXT=- 13 лет назад #
Да незачто, хоть кому-то понадобилось))
0
Dost Dost 11 лет назад #
Спасибо! Готовое решение для меня — то что нужно.
0
Rossoman Rossoman 11 лет назад #
А почему именно через display табличный? Что мешало сделать с помощью float?
Мне честно, просто интересно)

InstantCMS Team

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

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

О проекте

Поддержка

Дополнения

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