Резиновая блочная верстка

Резиновая верстка блочного макета с возможностью выбора 1, 2 или 3 колонок

#1 23 ноября 2011 в 06:00
Может кому пригодится для себя я сделал такой макет
ОТКРЫВАЕМ TEMPLATES/_DEFAULT_/TEMPLATE.PHP И МЕНЯЕМ ЕГО СОДЕРЖИМОЕ НА ЭТО
  1.  
  2. <?php
  3. if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
  4. $inUser = cmsUser::getInstance();
  5. $inCore = cmsCore::getInstance();
  6. ?>
  7.  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <!-- HEAD !-->
  12. <?php cmsPrintHead(); ?>
  13. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  14. <?php if($inUser->is_admin){ ?>
  15. <script src="/admin/js/modconfig.js" type="text/javascript"></script>
  16. <script src="/templates/blue/js/nyromodal.js" type="text/javascript"></script>
  17. <link href="/templates/blue/css/modconfig.css" rel="stylesheet" type="text/css" />
  18. <link href="/templates/blue/css/nyromodal.css" rel="stylesheet" type="text/css" />
  19. <?php } ?>
  20. <link href="/templates/blue/css/style.css" rel="stylesheet" type="text/css" />
  21. <link rel="icon" href="/templates/blue/images/favicon.ico" type="image/x-icon" />
  22. <link rel="shortcut icon" href="/templates/blue/images/favicon.ico" type="image/x-icon" />
  23.  
  24. </head>
  25. <body>
  26. <div id="container">
  27. <div id="header">
  28. <div id="usersMenu">
  29. <?php if (!$inUser->id){ ?>
  30. <ul>
  31. <li><a href="/registration" title="Регистрация нового пользователя" alt="Регистрация нового пользователя" class="usersMenu">Регистрация</a></li>
  32. <li>|</li>
  33. <li><a href="/login" title="Вход для зарегистрированных пользователей" alt="Вход для зарегистрированных пользователей" class="usersMenu">Вход</a></li>
  34. </ul>
  35. <?php } else { ?>
  36. <?php cmsModule('usersMenu'); ?>
  37. <?php } ?>
  38. </div>
  39. </div><!--#header-->
  40. <div id="topMenu">
  41. <?php cmsModule("topMenu"); ?>
  42. </div><!--#topMenu-->
  43. <div id="middle">
  44. <div id="page">
  45. <div id="<?php if (cmsCountModules("sidebarLeft") and cmsCountModules("sidebarRight")) { ?>content_3coll<?php }
  46. else if (cmsCountModules("sidebarRight")) { ?>content_2collRight<?php }
  47. else if (cmsCountModules("sidebarLeft")) { ?>content_2collLeft<?php }
  48. else { ?>content<?php } ?>">
  49. <?php cmsPathway('&#8594;'); ?>
  50. <?php $messages = cmsCore::getSessionMessages(); ?>
  51. <?php if ($messages) { ?>
  52. <div class="sess_messages">
  53. <?php foreach($messages as $message){ ?>
  54. <?php echo $message; ?>
  55. <?php } ?>
  56. </div>
  57. <?php } ?>
  58. <?php cmsModule("top"); ?>
  59. <?php cmsBody(); ?>
  60. <?php cmsModule("bottom"); ?>
  61. </div><!-- #content-->
  62. </div>
  63. <?php if (cmsCountModules("sidebarLeft")) { ?>
  64. <div class="sidebar" id="sideLeft">
  65. <?php cmsModule('sidebarLeft'); ?>
  66. </div><!-- .sidebar#sideLeft -->
  67. <?php } ?>
  68. <?php if (cmsCountModules("sidebarRight")) { ?>
  69. <div class="sidebar" id="sideRight">
  70. <?php cmsModule('sidebarRight'); ?>
  71. </div><!-- .sidebar#sideRight -->
  72. <?php } ?>
  73. </div><!--#middle-->
  74. </div><!--#container-->
  75. <div id="footer">
  76. <div id="copyright">
  77. <p>Copyright © 2011 </p>
  78. <p>При использовании материалов ссылка на сайт обязательна.</p>
  79. <p>Все права защищены.</p>
  80. </div>
  81. </div><!--#footer-->
  82. </body>
  83. </html>
  84.  
В TEMPLATES/_DEFAULT_/CSS СОЗДАЕМ НОВЫЙ ФАЙЛ STYLE.CSS И В НЕМ ПРОПИСЫВАЕМ ЭТОТ КОД
  1.  
  2. *{margin:0; padding:0;}
  3. html{height:100%;}
  4. body{height:100%; background-color:#fff; color:#000; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
  5. img{border:none;}
  6. h1{font-size:18px; color:#009ef3; margin-bottom:5px;}
  7.  
  8. /* Container
  9. -----------------------------------------------------------------------------*/
  10. #container{min-width:1000px; max-width:100%; margin:0 auto; min-height:100%; height:auto !important; height:100%;}
  11.  
  12. /* Header
  13. -----------------------------------------------------------------------------*/
  14. #header{}
  15. /* Pathway
  16. -----------------------------------------------------------------------------*/
  17. #pathway{border-bottom:1px dotted #009ef3; margin-bottom:5px; padding-bottom:3px; font-size:10px; color:#818181;}
  18. #pathway a{text-decoration:none; color:#009ef3;}
  19. #pathway a:hover{color:#007ef1;}
  20.  
  21. /* Middle
  22. -----------------------------------------------------------------------------*/
  23. #middle{width:100%; padding:0 0 100px; height:1%; position:relative;}
  24. #middle:after{content:'.'; display:block; clear:both; visibility:hidden; height:0;}
  25. #page{width:100%; float:left; overflow:hidden;}
  26. #content{text-align:justify; padding:10px;}
  27. #content_2collLeft{padding:10px 10px 10px 230px; text-align:justify;}
  28. #content_2collRight{padding:10px 230px 10px 10px; text-align:justify;}
  29. #content_3coll{padding:10px 230px 10px 230px; text-align:justify;}
  30.  
  31. /* Sidebar Left
  32. -----------------------------------------------------------------------------*/
  33. #sideLeft{float:left; width:220px; margin-left:-100%; position:relative;}
  34.  
  35. /* Sidebar Right
  36. -----------------------------------------------------------------------------*/
  37. #sideRight{float:left; margin-right:-3px; width:220px; margin-left:-220px; position:relative;}
  38.  
  39. /* Footer
  40. -----------------------------------------------------------------------------*/
  41. #footer{margin:-100px auto 0; min-width:1000px; max-width:100%; height:100px;}
  42. #copyright{color:#fff; float:left; width:430px; font-size:11px;}
  43. #copyright p{padding:0 0 5px 10px;}
  44.  
в POSITIONS ПРОПИСЫВАЕМ НУЖНЫЕ ПОЗИЦИИ МОДУЛЕЙ И ВОТ ВАМ ГОТОВЫЙ РЕЗИНОВЫЙ МАКЕТ С ПРИЖАТЫМ К НИЗУ ОКНА БРАУЗЕРА FOOTER-ОМ И ВОЗМОЖНОСТЬЮ ВЫБОРА ПОКАЗА КОЛОНОК.
#2 23 ноября 2011 в 07:51
Вы хотя бы скрин макета приатачили бы, а то получается, как в том советском фильме, где профессор искал ошибки в программе по перфоленте smileи название файлов, куда этот код вставлять.
#3 23 ноября 2011 в 09:42

название файлов, куда этот код вставлять.

Volgomarket
Да тут и так все понятно. Первый код — это код вставляется в template.php вместо всего имеющегося там кода. А второй код можно либо в новый файл вставить, и потом подключить его в шаблоне, либо вставить в файл styles.css, можно в самый конец
#4 23 ноября 2011 в 09:56

Да тут и так все понятно. Первый код — это код вставляется в template.php вместо всего имеющегося там кода. А второй код можно либо в новый файл вставить, и потом подключить его в шаблоне, либо вставить в файл styles.css, можно в самый конец

Rossoman
СОВЕРШЕННО ВЕРНО
ВСЕ ПОПРАВИЛ ВРОДЕ ТАК БОЛЕЕ ПОНЯТНЕЕ
#5 23 ноября 2011 в 10:22
altyhovm,
Вот теперь народу понятно ) Просто не все же занимаются дизайном, версткой и программированием, пост будут читать и новички и такие как я, у кого в голове конец отчетного периода, походы в налоговую, нахождение новых клиентов и т.п. вопросы Российского предпринимательства, а уж InstantCMS как дополнительный инструмент, для будущего бизнеса.
#6 23 ноября 2011 в 10:58


altyhovm,
Вот теперь народу понятно ) Просто не все же занимаются дизайном, версткой и программированием, пост будут читать и новички и такие как я, у кого в голове конец отчетного периода, походы в налоговую, нахождение новых клиентов и т.п. вопросы Российского предпринимательства, а уж InstantCMS как дополнительный инструмент, для будущего бизнеса.

Volgomarket

ПОНЯТНО УЧТУ
#7 24 ноября 2011 в 11:02
altyhovm, так понимаю, что "резина" от 1000px до 8_на_боку?
Видимо, надо создавать с дефолтным рядом шаблон "blue"?
Попробовал, не получилось. Главное меню стало вертикальным текстом. Пробовал прописывать показ на других позициях — вообще не отражается.

И ВОТ ВАМ ГОТОВЫЙ РЕЗИНОВЫЙ МАКЕТ

altyhovm
#8 24 ноября 2011 в 12:13
минимальную ширину можно менять на какую угодно хоть 500px хоть 800px
Как я делал
копируешь дефолтную папку с шаблоном, переименовываешь ее в какую хочешь (blue просто я делал для себя)
в template.php меняешь на этот код а в css на код css
обратите внимание на пути к файлам
Это всего лишь макет тут нет лишних стилей это для того если вы делаете шаблон с нуля стилей меню тут не прописаны
вот пример реализации этого макета пример
#9 24 ноября 2011 в 12:17
чуть позже выложу универсальный шаблон на основе дефолтного
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.