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

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

#1 23 ноября 2011 в 06:00

Может кому пригодится для себя я сделал такой макет
ОТКРЫВАЕМ TEMPLATES/_DEFAULT_/TEMPLATE.PHP И МЕНЯЕМ ЕГО СОДЕРЖИМОЕ НА ЭТО

 
<?php
    if(!defined('VALID_CMS')) { die('ACCESS DENIED'); }
    $inUser = cmsUser::getInstance();
    $inCore = cmsCore::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(); ?>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
    <?php if($inUser->is_admin){ ?>
        <script src="/admin/js/modconfig.js" type="text/javascript"></script>
        <script src="/templates/blue/js/nyromodal.js" type="text/javascript"></script>
        <link href="/templates/blue/css/modconfig.css" rel="stylesheet" type="text/css" />
        <link href="/templates/blue/css/nyromodal.css" rel="stylesheet" type="text/css" />
    <?php } ?>
    <link href="/templates/blue/css/style.css" rel="stylesheet" type="text/css" />	
	<link rel="icon" href="/templates/blue/images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/templates/blue/images/favicon.ico" type="image/x-icon" />
 
</head>
<body>
<div id="container">
    <div id="header">
		    <div id="usersMenu">
			    <?php if (!$inUser->id){ ?>
                <ul>
                    <li><a href="/registration" title="Регистрация нового пользователя" alt="Регистрация нового пользователя" class="usersMenu">Регистрация</a></li>  
                    <li>|</li>  
                    <li><a href="/login" title="Вход для зарегистрированных пользователей" alt="Вход для зарегистрированных пользователей" class="usersMenu">Вход</a></li>
                </ul>
                <?php } else { ?>
                <?php cmsModule('usersMenu'); ?>
                <?php } ?>
		    </div>			
	</div><!--#header-->
	<div id="topMenu">
	    <?php cmsModule("topMenu"); ?>
	</div><!--#topMenu-->
	<div id="middle">
	<div id="page">
            <div id="<?php if (cmsCountModules("sidebarLeft") and cmsCountModules("sidebarRight")) { ?>content_3coll<?php }
			               else if (cmsCountModules("sidebarRight")) { ?>content_2collRight<?php }
			               else if (cmsCountModules("sidebarLeft")) { ?>content_2collLeft<?php }
			               else { ?>content<?php } ?>">
						   <?php cmsPathway('&#8594;'); ?>
						    <?php $messages = cmsCore::getSessionMessages(); ?>
                                <?php if ($messages) { ?>
                                    <div class="sess_messages">
                                        <?php foreach($messages as $message){ ?>
                                        <?php echo $message; ?>
                                        <?php } ?>
                                    </div>
                                <?php } ?>
			         <?php cmsModule("top"); ?>	
			               <?php cmsBody(); ?>
                                    <?php cmsModule("bottom"); ?>
		    </div><!-- #content-->
			</div>
        <?php if (cmsCountModules("sidebarLeft")) { ?>   
		<div class="sidebar" id="sideLeft">
        <?php cmsModule('sidebarLeft'); ?>
		</div><!-- .sidebar#sideLeft -->
        <?php } ?>
        <?php if (cmsCountModules("sidebarRight")) { ?>
        <div class="sidebar" id="sideRight">
        <?php cmsModule('sidebarRight'); ?>
		</div><!-- .sidebar#sideRight -->
        <?php } ?>		
	</div><!--#middle-->
</div><!--#container-->
<div id="footer">
    <div id="copyright">
       <p>Copyright © 2011 </p>
       <p>При использовании материалов ссылка на сайт обязательна.</p>
       <p>Все права защищены.</p>		
    </div>
</div><!--#footer-->
</body>
</html>

В TEMPLATES/_DEFAULT_/CSS СОЗДАЕМ НОВЫЙ ФАЙЛ STYLE.CSS И В НЕМ ПРОПИСЫВАЕМ ЭТОТ КОД

 
*{margin:0; padding:0;}
html{height:100%;}
body{height:100%; background-color:#fff; color:#000; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
img{border:none;}
h1{font-size:18px; color:#009ef3; margin-bottom:5px;}
 
/* Container
-----------------------------------------------------------------------------*/
#container{min-width:1000px; max-width:100%; margin:0 auto; min-height:100%; height:auto !important; height:100%;}
 
/* Header
-----------------------------------------------------------------------------*/
#header{}
/* Pathway
-----------------------------------------------------------------------------*/
#pathway{border-bottom:1px dotted #009ef3; margin-bottom:5px; padding-bottom:3px; font-size:10px; color:#818181;}
#pathway a{text-decoration:none; color:#009ef3;}
#pathway a:hover{color:#007ef1;}
 
/* Middle
-----------------------------------------------------------------------------*/
#middle{width:100%; padding:0 0 100px; height:1%; position:relative;}
#middle:after{content:'.'; display:block; clear:both; visibility:hidden; height:0;}
#page{width:100%; float:left; overflow:hidden;}
#content{text-align:justify; padding:10px;}
#content_2collLeft{padding:10px 10px 10px 230px; text-align:justify;}
#content_2collRight{padding:10px 230px 10px 10px; text-align:justify;}
#content_3coll{padding:10px 230px 10px 230px; text-align:justify;}
 
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft{float:left; width:220px; margin-left:-100%; position:relative;}
 
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight{float:left; margin-right:-3px; width:220px; margin-left:-220px; position:relative;}
 
/* Footer
-----------------------------------------------------------------------------*/
#footer{margin:-100px auto 0; min-width:1000px; max-width:100%; height:100px;}
#copyright{color:#fff; float:left; width:430px; font-size:11px;}
#copyright p{padding:0 0 5px 10px;}

в POSITIONS ПРОПИСЫВАЕМ НУЖНЫЕ ПОЗИЦИИ МОДУЛЕЙ И ВОТ ВАМ ГОТОВЫЙ РЕЗИНОВЫЙ МАКЕТ С ПРИЖАТЫМ К НИЗУ ОКНА БРАУЗЕРА FOOTER-ОМ И ВОЗМОЖНОСТЬЮ ВЫБОРА ПОКАЗА КОЛОНОК.

#2 23 ноября 2011 в 07:51

Вы хотя бы скрин макета приатачили бы, а то получается, как в том советском фильме, где профессор искал ошибки в программе по перфоленте smile

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

#3 23 ноября 2011 в 09:42

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

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

Сегодня в 19:43

#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

чуть позже выложу универсальный шаблон на основе дефолтного

Instant shop- категории товаро

Верхний блок по принципу "Одно

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Дизайн, верстка, верстка на instantcms, разработка небольших дополнений

Шаблон, верстка, функции

Верстка шаблонов в Конструкторе тем

Вёрстка и адаптивность

Выполню работы по дизайну и вёрстке за знания по PHP и непосредственно движку InstantCms

Ищется талантливый верстальщик на базе шаблона modern

InstantCMS Team

О проекте

Поддержка

Дополнения