- Postagens: 372
- Obrigados Recebidos: 0
Dificuldade de desenvolvimento de template
12 anos 7 meses atrás #87507
por abobre
abobre created the topic: Dificuldade de desenvolvimento de template
Boa noite, sempre que tenho que desenvolver um template para o joomla eu apanho em uma parte do desenvolvimento do template e nunca sei resolver de forma correta e vou explicar o que esta acontecendo.
Código HTML do template
Código CSS
O meu problema esta sendo na div conteudo, nesta div eu coloco a tag <jdoc:include type="component" /> e defino a div all(todo site) e conteudo, se o texto da div conteúdo estiver maior que o tamanho da div conteudo o texto fica em cima da div footer que fica embaixo da div coteúdo. Já tentei de diversas foramas mas nunca consigo resolvolver o meu problema.
Segue um print screen para ajudar a identificar o problema
Código HTML do template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="all">
<div id="head">
<div id="logo"></div>
<div id="menu_top">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div> <!--Fechando div menu_top-->
</div> <!--Fechando div head-->
<div id="banner">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div> <!--Fechando div banner-->
<div id="conteudo">
<jdoc:include type="component" />
</div><!-- Fechando div conteudo-->
<div id="footer">
<div class="footer_esq">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<!--Fechando div footer_esq-->
</div><!-- Fechando div footer-->
</div> <!--Fechando div all-->
</body>
</html>Código CSS
@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700,400,400italic);
body{
background: url(../images/bg.jpg) repeat fixed;
font-family: 'Happy Monkey', cursive;
font-weight: normal;
color:#FFF;
padding: 0px;
margin: 0 auto;
}
#all{
width: 980px;
min-height: 1200px;
padding: 0px;
margin: 0 auto;
}
#head{
width: 980px;
height: 136px;
background:url(../images/header.jpg) repeat-x;
}
#logo{
width: 298px;
height: 115px;
background:url(../images/logo.png) no-repeat;
float: left;
margin: 10px;
}
#menu_top{
width: 680px;
height: 50px;
padding: 40px 0 0 300px;
}
#menu_top li{
display:inline;
list-style-type:none;
padding: 0 25px 0 10px;
}
ul.menu_top li a{
font-family: 'Libre Baskerville', serif;
font-weight: normal;
font-size: 19px;
color:#FFF;
text-decoration:none;
}
#banner{
width: 980px;
height: 277px;
background:#FFF;
}
#conteudo{
width: 980px;
min-height: 650px;
background:#FFF;
}
.cols-2 .column-1, .cols-2 .column-2 {
float: left;
width: 440px;
margin-left: 35px;
}
.column-1 h2, .column-2 h2, .item-page h2 a{
font-family: 'Libre Baskerville', serif;
font-weight: normal;
font-size: 28px;
color:#036;
text-decoration:none;
background:url(../images/blue-ok-icon.png) no-repeat;
padding-left: 35px;
}
.item-page h2{
font-family: 'Libre Baskerville', serif;
font-weight: normal;
font-size: 28px;
color:#036;
text-decoration:none;
margin: 0;
padding: 10px 0 0 10px;
}
.column-1 p, .column-2 p{
color:#000;
text-align:justify;
}
.item-page p{
margin: 20px;
color:#000;
text-align:justify;
}
#footer{
width: 980px;
height: 215px;
background:url(../images/footer.jpg) repeat-x;
}
.moduletable_pagamento h3{
margin: 0;
font-family: 'Libre Baskerville', serif;
font-weight: normal;
font-size: 18px;
color:#FFF;
padding: 10px 0 0 25px;
}
.custom_pagamento img{
padding-left: 5px;
}
.readmore a{
font-weight: bold;
font-size: 14px;
color:#036;
text-decoration:none;
}
.pagenav{
margin: 0;
}
.pricing_table {
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
outline:7px solid #f2f3f3;
float:left;
margin: 30px 0 0 90px;
}
.pricing_table ul {
list-style:none;
float:left;
width:147px;
margin:0;
border:1px solid #f2f3f3;
padding:5px;
text-align:center;
background-color:#FFF;
}
.pricing_table ul:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
cursor:pointer;
}
.pricing_table ul li {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
color:#000;
}
.pricing_table ul li:first-child {
font-size:18px;
font-weight:bold;
}
.pricing_table ul li:nth-child(2) {
background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) {
font-size:12px;
font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) {
font-size:14px;
}
.pricing_table ul li:last-child a {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px solid #c4cbcc;
padding:10px;
margin:5px 0;
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
color:#000;
font-style:italic;
display:block;
} O meu problema esta sendo na div conteudo, nesta div eu coloco a tag <jdoc:include type="component" /> e defino a div all(todo site) e conteudo, se o texto da div conteúdo estiver maior que o tamanho da div conteudo o texto fica em cima da div footer que fica embaixo da div coteúdo. Já tentei de diversas foramas mas nunca consigo resolvolver o meu problema.
Segue um print screen para ajudar a identificar o problema
