Как реализовать резиновый шаблон?

[al_hagen]

Здравствуйте уважаемые знатоки, подскажите пожалуйста как реализовать шаблон где шапка и подвал и центральная часть растягиваются на всю ширину.

при этом центральная часть имеет три колонки, и с обоих сторон имеются равные отступы от границ экрана.....

Сам я начинающий, учусь всему методом научного тыка путём а ну ка вот вот это подправим и посмотрим что получиться.......так что прошу сильно не пинать.

Вот что наваял....

  Reveal hidden contents

* {
margin:0;
padding:0;
}


h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

a{
  text-decoration: underline;
  color:20588 ;
}

a:link{
  text-decoration: underline;
  color: #2d7486;
}

a:visited, a.visited{
  color:#30b2cf;
}

a:hover, a.hover{
  text-decoration: none;
  color: #E64519;
}

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{
font:bold 22px Arial, Helvetica, sans-serif ;
font-style:italic;
color: #30b2cf;
text-align:center;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{
  font-size:20px;
  color: #3b98b0;
  font-style:italic;
text-align:center;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{
  font-size: 18px;
  color: #82b5bf;
  text-align:center;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover,h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover,h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{
  font-size: 125%;
  color: #3b98b0;
}

a img {
	border: none;
}
p img {
margin-right:10px;
}


p {
	margin: 5px 0 10px 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

body {
min-width:1000px; width:100%; height:100%;
background-color:#FFF;
  margin:0 auto;
  padding:0;
  text-align:center;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif ;
  line-height:1.3;
  color:#000;
  height: auto !important;
position: relative;
}


#page {
width:100%;
height: 100%;
min-height: 100%;
text-align:left;
margin:auto;
background-color:#FFFFFF;
border:3px solid #82b5bf;
margin-top:20px;
padding-bottom: 114px;
}


#pathway{
height:35px;
background-color:#fff;
overflow:hidden;
}

#breadcrumbs {
	width: 75%;
	float: left;
	text-align:right;
	padding:8px;
	color:#000;
	font:bold 14px Arial, Helvetica, sans-serif;
	font-style:italic;
}

#user1  {
	width: 20%;
	float: right;
}

#user1 input {
background:url('../images/search.png') no-repeat;
height:18px;
width:180px;
font:12px Arial, Helvetica, sans-serif;
padding-top:2px;
margin:4px 0 0 0;
color:#000;
font-style:italic;
border:3px double #3b98b0;
}


#header {
overflow:hidden;
height:300px;
background-color:#278EBB;
border-top:2px solid #3b98b0;
border-bottom:2px solid #3b98b0;
}

#header h1 {
font: bold 38px Arial, Helvetica, sans-serif small-caps;
font-style:italic;
text-align:left;
padding:20px 0 0 50px;
}

#header h2{
font:18px Arial, Helvetica, sans-serif small-caps;
font-style:italic;
text-align:left;
color:#fff;
line-height:0.3em;
padding:10px 0 0 80px;
}


#block{position: absolute;
left:5%;
width:70%}
/*eaaay eieiiea naeoa*/
#left {
position: absolute;
width:20%;
margin-top:5px;
}

#rigth {
position: relative;
left:75%;
width:20%;
margin-top:5px;
}

#content60 {
left:10%;
position: relative;
width:70%;
overflow:hidden;
padding-left:15%;
}

#content80 {

float:left;
width:780px;
overflow:hidden;
padding-right:5px;
}



.componentheading {
font:bold 22px Arial, Helvetica, sans-serif ;
color:#fff;
text-align:center;
background-color:#e64519;
border:3px double #fff;
margin-bottom:5px;
padding:3px;
margin-top:5px;
}


.button,input.button,button.validate  {
background:#e64519;
height:30px;
font-size:12px;
color:#fff;
margin:2px;
padding:2px 10px 2px 10px;
cursor:hand;
}

.moduletable,.moduletable_custom {
margin:0 0 5px 0;
font:12px Arial, Helvetica, sans-serif ;
color:#000;
padding-bottom:10px;
line-height: 1.5em;
border:1px solid #71bdd0;
background-color:#def3f7;
}


.moduletable h3,.moduletable_custom h3 {
font:16px Arial, Helvetica, sans-serif ;
height:22px;
font-style:italic;
color:#fff;
text-align:left;
padding: 3px 5px 1px 15px;
background-color:#71bdd0;
}


.moduletable_custom p{
line-height:1.5em;
padding:0 5px 0 5px;
margin:0;
text-align:left;
}

.moduletable_custom img{
margin:5px;
position:relative;
}


.moduletable_bot {
float: left;
margin:0 5px 2px 5px;
font:12px Arial, Helvetica, sans-serif ;
color:#000;
line-height: 0.5em;
}


.moduletable_bot h3 {
font:14px Arial, Helvetica, sans-serif ;
height:20px;
font-style:italic;
color:#fff;
text-align:center;
padding: 3px 0 2px 0;
background-color:#3b98b0;
}


.moduletable ul li, .moduletable_custom ul li, .moduletable_bot ul li   {
    margin: 0.5em;
 	background: url('../images/img_red1.gif') no-repeat;
	line-height: 1.5em;
    padding: 0 0 0 12px;
	list-style:none;
}

.moduletable ul, .moduletable_custom ul, .moduletable_bot ul{
  color: #000;
  margin:0.2em;
  padding: 0;
  font-size: 12px;
}

.moduletable li ul, .moduletable_custom li ul,.moduletable_bot li ul {
  margin: 0.5em;
  padding: 0;
}

fieldset {
border:none;
}

#form-login{
text-align:center;
padding:5px 0 5px 0;}

#form-login-username, #form-login-password, #form-login-remember{
margin:0px;
padding: 0 0 2px 0;
}

#modlgn_remember{
margin:2px 0 0 10px;
height:15px;
width:15px;
border:1px solid #aaa6a3;
}

#form-login ul {
text-align:left;
}

#josForm  {
margin:20px;}

button.validate  {
margin-bottom:20px;
}


#user3 {
	width: 100%;
	margin-bottom:10px;
	}

.moduletablenav {
font:12px Arial, Helvetica, sans-serif ;
color:#363636;
padding-left:10px;
}


#bottom {
overflow:hidden;
width:100%;
background-color:#def3f7;

}

#bottombox {
margin-top:10px;
float:left;
left:50%;
position:relative;
}
#bottomboxin {
float:left;
left:-50%;
position:relative;
overflow:hidden;
}



#footer {
width:100%;
clear:both;
height:114px;
background:url('../images/foot.jpg')repeat-x;
bottom: 0;
}

.moduletablefoot {
font: bold 12px Arial, Helvetica, sans-serif ;
color:#fff;
text-align:left;
padding-top:40px;
padding-left:30px;
line-height:1.5;
}

.moduletablefoot p{
line-height:0.5;
}



.contentpaneopen {
background-color:#fff;
padding:0px;
line-height: 1.5;
text-align:justify;
margin-top:10px;
 }

table.contentpaneopen {
width: 100%;
}


.contentpaneopen ul {
padding:10px 0 10px 20px;
list-style-image:url('../images/img_green1.gif');
}

.contentpaneopen li {
padding-bottom:10px;
}

.contentpaneopen ol {
margin:20px;
list-style-type:decimal;
}




</head>
	<body>
		<!--оформление страницы сайта-->
<div id="page">

<!--блок поиска по сайту и верхней навигации "хлебные крошки"--> 
 <div id="pathway">
<!--вывод модуля верхней навигации "хлебные крошки" в позиции breadcrumbs -->
<div id="breadcrumbs">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<!--вывод модуля поиска по сайту в позиции user1-->
<div id="user1">
<jdoc:include type="modules" name="user1" />
</div> 
</div><!-- конец блока поиска и верхней навигации-->  

<!--блок шапки сайта header -->
<div id="header">

			 </div>

	<!--вывод модуля горизонтального меню в позиции user2-->
	  <?php if($this->countModules('user2')) : ?>
 <div id="topmenu ">
	   <jdoc:include type="modules" name="user2" style="xhtml" /> 
	  	  </div> 
     	  <?php endif; ?>	
<div id ="block">	  
 <!--левая колонка сворачивается если нет контента-->
	        <?php if($this->countModules('left')) : ?>
      <div id="left">
           <jdoc:include type="modules" name="left" style="xhtml" />
      </div>
      <?php endif; ?>

<!--открываем блок контента-->
	 <div id="content<?php echo $contentwidth; ?>">

<!--вывод содержимого контента-->     
      <jdoc:include type="component" style="xhtml" />

</div> <!--конец блока контента-->
          </div>	       

<!--правая колонка сворачивается если нет контента -->
<?php if($this->countModules('right')) : ?>
<div id="rigth">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>	



<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->
<?php if($this->countModules('footer')) : ?>
 </div><!--конец page-->

 <!--вывод блока bottom -->
	<?php if($this->countModules('bottom')) : ?>
	      <div id="bottom">
	    <div id="bottombox">
		  <div id="bottomboxin">
	        <jdoc:include type="modules" name="bottom" style="xhtml" />
	   </div> </div></div>
      <?php endif; ?>

<!--вывод нижнего меню сайта в позиции bottommenu  -->
	<?php if($this->countModules('bottommenu')) : ?>
	      <div id="bottommenu">
	    <jdoc:include type="modules" name="bottommenu" style="xhtml" />
	   </div> 
      <?php endif; ?> 
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<?php endif; ?>	


	</body>
</html>

Вот примерная схема

<a href="http://s1.uploads.ru/UbV5m.png"><img src="http://s1.uploads.ru/t/UbV5m.png" border="0" /></a>

Edited October 12, 2012 by Softlink
Оформляйте код в спец. теги

[Bryant-24]

Что то странное Вы спрашиваете, да еще и php код сюда всунули - зачем?

А вообще - видно, что не Вы делали этот шаблон, т.к. сделав все это и не знать, как сделать из него резину - это просто чушь какая-то

Используйтесь сервис, который делает готовые резиновые (и не только) шаблоны, и накидывайте все то, что Вы тут понаписали (причем лучше в следующий раз код, вставляя в сообщение, заключать в специальные теги, иначе читать невозможно)

[USF]

1) оформите нормально код

2) хотите резину - верстайте на %

[al_hagen]

  On 10/12/2012 at 8:07 AM, Bryant-24 said:

Что то странное Вы спрашиваете, да еще и php код сюда всунули - зачем?

А вообще - видно, что не Вы делали этот шаблон, т.к. сделав все это и не знать, как сделать из него резину - это просто чушь какая-то

Используйтесь сервис, который делает готовые резиновые (и не только) шаблоны, и накидывайте все то, что Вы тут понаписали (причем лучше в следующий раз код, вставляя в сообщение, заключать в специальные теги, иначе читать невозможно)

Спасибо за ответ.

Я себе авторство шаблона и не присваивал, взял за основу бесплатный шаблон и по нему пытаюсь понять что как устроено....

Можно поподробнее про php код как и где он должен быть??? В исходном шаблоне он идёт в перемешку с дивами в index.php

Готовый шаблон брать не хочу, это не наш метод...))

В принципе уже разобрался более менее, вроде всё получилось, сейчас немного подправлю и вынесу результат на суд общественности

Насчёт кода в сообщениях извините, я не понял как это сделать.....поэтому и выложил так....в какие тэги нужно его заключать?????Подскажите.

[Bryant-24]

В форме быстрого ответа (да и в расширенной тоже) есть кнопка "<>" После того, как вставятся теги, между ними собственно и пишите тот код, который хотите показать.