Div Aumentando Conforme Conteúdo

abobre · Março 8, 2013

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

<!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

LeandroAlves · Março 8, 2013

abobre, poderia colocar em teste em algum domínio para verificar melhor? Trabalho um pouco com Joomla e pra mim seria mais fácil online.

abobre · Março 8, 2013

OBrigado por responder Leandro, mas após postar solicitando ajuda que consegui resolver.

Solução: Usei a propriedade display:table, conforme abaixo.

#all{
	width: 980px;
	height: auto;
	padding: 0px;
	margin: 0 auto;
	display: table;
}

#conteudo{
	width: 980px;
	height: auto;
	background:#FFF;
	display: table;
	padding-bottom: 50px;
}

LeandroAlves · Março 8, 2013

Opa! Beleza então!

Entrar

Div Aumentando Conforme Conteúdo

Posts Recomendados

abobre

LeandroAlves

abobre

LeandroAlves

Quem Está Navegando 0 membros estão online

Tópicos recentes

Browse

Informação Importante