Ir para conteúdo
View in the app

A better way to browse. Learn more.
Portal do Host

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Div Aumentando Conforme Conteúdo

Por abobre
em Design, Desenvolvimento & E-commerce

Featured Replies

Postado

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

e804f0ad_o.png

Postado

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.


Postado
  • Autor

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;
}


Visitante
Este tópico está impedido de receber novos posts.
https://portaldohost.com.br/topic/11666-div-aumentando-conforme-conte%C3%BAdo/
Ir para a lista de tópicos

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Informação Importante

Concorda com os nossos termos?

I accept

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.