Jump to content
  • 0

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

al_hagen

Asked by al_hagen,

 Share

Question

al_hagen Explorer

al_hagen

Posted
Posted (edited)

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

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

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

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

* {
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 by Softlink
Оформляйте код в спец. теги
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Bryant-24 Explorer

Bryant-24

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
al_hagen Explorer

al_hagen

Posted
  • Author
Posted

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Bryant-24 Explorer

Bryant-24

Posted
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept