Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá amigos do Imasters,
Estou desenvolvendo um site em XHTML e CSS...
Minha dúvida se encontra no seguinte...
Eu tenho um DIV, aonde coloco o conteúdo do site... textos e imagens....
Este DIV se encontra dentro de um outro DIV, que contém apenas uma figura de fundo.
Eu gostaria que o height da DIV onde contém a imagem de fundo aumentasse de acordo com a DIV onde tem o conteúdo. Ou seja, conforme eu escreva, o fundo vai se redimensionando pra ficar do tamanho do texto.
Sou novato, e consegui aprender bastante com tutoriais expalhados pela net, mas isso ainda não consegui fazer...
Não gostaria de criar uma tabela para resolver o problema... Tendo em vista os problemas que poderiam ser causados com mudanças de resolução...
O site (teste) é: http://www.rafaelgcrespo.com.br/site.html
O código-fonte:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css"> background-color: #bbf1ff;
}
#degrade {
position:absolute;
width:1547px;
height:474px;
z-index:1;
left: -1px;
top: -1px;
background-image: url(layout/degrade_azul.jpg);
}
#conteudo {
position:absolute;
width:700px;
height:244px;
z-index:2;
left: 50%;
top: 84px;
margin-left:-350px;
}
#banner {
position:absolute;
width:800px;
height:115px;
z-index:3;
left: 50%;
top: 108px;
margin-left:-400px;
background-image: url(layout/banner.png);
}
#Layer1 {
position:absolute;
width:409px;
height:115px;
z-index:4;
left: 31px;
top: 85px;
}
#Layer2 {
position:absolute;
width:445px;
height:229px;
z-index:4;
left: 85px;
top: 233px;
}
.noticias {
font-size: 12px;
font-family: "Myriad Web Pro", "Myriad Web Pro Condensed";
color: #FFFFFF;
font-style: italic;
}.titulo {
font-family: "Myriad Web Pro", "Myriad Web Pro Condensed";
color: #FFFFFF;
font-size: 48px;
font-style: italic;
} background-attachment: scroll;
background-image: url(layout/overlay_topo.png);
background-repeat: no-repeat;
} height: 28px;
} background-image: url(layout/overlay_meio.png);
} background-image: url(layout/overlay_base.png);
height: 28px;
} position:relative;
width:420px;
height:115px;
top: 120px;
left: 30px;
} background-attachment: scroll;
background-image: url(layout/conteudo_topo.png);
background-repeat: no-repeat;
position: relative;
height: 28px;
} background-image: url(layout/conteudo_meio.png);
position: relative;
} background-image: url(layout/conteudo_base.png);
position: relative;
height: 28px;
} width: 220px;
position: relative;
left: 455px;
top: 40px;
} position: relative;
background-image: url(layout/noticias_topo.png);
height: 20px;
} position: relative;
background-image: url(layout/noticias_meio.png);
} position: relative;
background-image: url(layout/noticias_base.png);
height: 24px;
}</style>
</head>
<body>
<div id="conteudo">
<div class="overlay_topo" id="overlay_topo"></div>
<div class="overlay_meio" id="overlay_meio">
<div id="conteudo_fundo">
<div class="conteudo_fundo_cima" id="conteudo_fundo_cima"></div>
<div class="normal" id="conteudo_fundo_meio">Herezdfzdfsdfsdfsdfsdfsdfsdfsdfsdfsdf sdf sdf sdf sdf sdf sd sd fsdf sdf sdf sdf sdf sdf sdfsdf sdfs df sdf sdf sdf sdf sdf sdf sdf sdfs dfsd fsd fsdf sdf sdfs dfsd sddddd fds sdf sdf sdf sfs fsd sdf sdf sdfsd fsdfs dfsd sd sdf sdf sdf sdf sdf sd sd fsdf sdf sdf sdf sdf sdf sdfsdf sdfs df sdf sdf sdf sdf sdf sdf sdf sdfs dfsd fsd fsdf sdf sdfs dfsd sddddd fds sdf sdf sdf sfs fsd sdf sdf sdfsd fsdfs dfsd sd sdf sdf sdf sdf sdf sd sd fsdf sdf sdf sdf sdf sdf sdfsdf sdfs df sdf sdf sdf sdf sdf sdf sdf sdfs dfsd fsd fsdf sdf sdfs dfsd sddddd fds sdf sdf sdf sfs fsd sdf sdf sdfsd fsdfs dfsd sd sdf sdf sdf sdf sdf sd sd fsdf sdf sdf sdf sdf sdf sdfsdf sdfs df sdf sdf sdf sdf sdf sdf sdf sdfs dfsd fsd fsdf sdf sdfs dfsd sddddd fds sdf sdf sdf sfs fsd sdf sdf sdfsd fsdfs dfsd sd sdf sdf sdf sdf sdf sd sd fsdf sdf sdf sdf sdf sdf sdfsdf sdfs df sdf sdf sdf sdf sdf sdf sdf sdfs dfsd fsd fsdf sdf sdfs dfsd sddddd fds sdf sdf sdf sfs fsd sdf sdf sdfsd fsdfs dfsd sd <br />
</div>
<div class="conteudo_fundo_base" id="conteudo_fundo_base"></div>
</div>
<div class="conteudo_noticias_fundo" id="conteudo_noticias_fundo">
<div class="noticias_fundo_cima" id="noticias_fundo_cima"></div>
<div class="noticias" id="noticias_fundo_meio">asdasdasdasdasdasdasdasdasda asda sd as da sd asd as da sd sdsdsa d asd asd asd as da sddd sd as das d asd asdasasdasasd asd asd asd sda sda sd sdsdsdasdasdasd sdasdasd oahsodh n oasnd ojsnd ojno jasndoj asnodah sduahsOAUSHDJASn djosnd OSOnOASD OASDonsadon saOND oSAND OAHOAUI shdouiahSodhasdoOA ASD ASIDHASD ihsd hAIHSD AHISd hpAIS IDAJSDP IAJSDP
</div>
<div class="noticias_fundo_base" id="noticias_fundo_base"></div>
</div>
<br />
<br />
<br />
<br />
</div>
<div class="overlay_base" id="overlay_base"></div>
<p><br />
<br />
</p>
</div>
<div id="degrade"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="banner"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>Abraços à todos,
Rafael Crespo
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Carregando comentários...