Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

uff_bruno

Problemas com layout baseado em DIV's

Por , em Desenvolvimento frontend

Recommended Posts

uff_bruno    0

uff_bruno
Postado

Olá. Sou iniciante com CSS e estou tentando esboçar o layout de uma página. Inicialmente com Div's e bordas pra visualizar.

 

Tenho um div geral que engloba todo o site. E tenho div's para cabeçalho, menu, conteúdo e rodapé.

 

O problema que estou enfrentando é o seguinte: Os div's estão posicionados corretamente. Então eu começo a encher o Div de conteúdo com informação. Mas à medida que o div vai crescendo, o div geral não acompanha a altura, deixando o div de conteúdo passar do limite. Eu queria que o div geral acompanhasse os outros conforme cada um fosse crescendo.

 

Vou postar os códigos pra vcs darem uma olhada.

 

 

Aqui o código CSS

 

div#geral{  font: 10pt Verdana, Sans-Serif, Serif;   border: 1px solid;   width: 800px;   height: auto;   position: absolute;   left: 50%;   margin-left: -400px;}div#cabecalho{  border: 1px solid;   width: 800px;   height: 100px;}div#menu{  border: 1px solid;   width: 120px;   /*float: left;*/}div#conteudo{  width: 680px;   position: absolute;   left: 120px;   top: 100px;   border: 1px solid red;}div#rodape{  border: 1px solid;}

E aqui o código HTML.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT = "text/html; charset=UTF-8">
<TITLE>Igreja de Nova Vida - A sua família em Meriti</TITLE>
<LINK REL = "stylesheet" HREF = "estilos/inv.css" TYPE = "text/css">
</HEAD>

<BODY>
 <DIV ID = "geral">
    <DIV ID = "cabecalho">
       cabeçalho
    </DIV>
    <DIV ID = "menu">
       menu
    </DIV>
    <DIV ID = "conteudo">
       conteúdo: Aqui testando a div conteudo para ver se quando um texto chega
ao limite ele pula para a linha seguinte.conteúdo: Aqui testando a div conteudo para ver se quando um texto chega
ao limite ele pula para a linha seguinte.conteúdo: Aqui testando a div conteudo para ver se quando um texto chega
ao limite ele pula para a linha seguinte.conteúdo: Aqui testando a div conteudo para ver se quando um texto chega
ao limite ele pula para a linha seguinte.conteúdo: Aqui testando a div conteudo para ver se quando um texto chega
ao limite ele pula para a linha seguinte.
    </DIV>
    <DIV ID = "rodape">
       rodapé
    </DIV>
 </DIV>
</BODY>
</HTML>

 

Se alguém puder me ajudar... onde estou errando?

 

Abraços e fiquem com Deus.

 

Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarviN*    0

MarviN*
Postado

Dica: Evite usar a propriedade position absolute. Você pode fazer assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"><head><title>Documento</title><style type="text/css" media="all"><!-- /* Estilos CSS *//* Define as mesmas propriedades para os divs cabecalho e rodape */#cabecalho, #rodape {	border: 1px dashed #000; /* Borda preta, tracejada de 1 pixel */}#menu {	border: 1px dashed #f00; /* Borda vermelha... */	width: 150px;	float: left;}#conteudo {	border: 1px dashed #00f; /* Borda azul... */	margin-left: 155px;	width: 100%;}--></style></head><body><div id="cabecalho">	<h1>Cabeçalho da Página</h1></div><div id="menu">	<p>Aqui fica o seu menu</p></div><div id="conteudo">	<p>  On a dark desert highway, cool wind in my hair  Warm smell of colitas, rising up through the air  Up ahead in the distance, I saw a shimmering light  My head grew heavy and my sight grew dim  I had to stop for the night  There she stood in the doorway;  I heard the mission bell  And I was thinking to myself,  'This could be Heaven or this could be Hell'  Then she lit up a candle and she showed me the way  There were voices down the corridor,  I thought I heard them say...	</p>	<p>  Welcome to the Hotel California  Such a lovely place  Such a lovely face  Plenty of room at the Hotel California  Any time of year, you can find us here	</p>	<p>  Her mind is Tiffany-twisted, she got a Mercedes-benz  She got a lot of pretty, pretty voice, that she calls friends  How they dance in the courtyard, sweet summer sweat.  Some dance to remember, some dance to forget	</p></div><div id="rodape">	<p>Endereços e Telefones</p></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

uff_bruno    0

uff_bruno
Postado

Valeu mesmo cara. Testei aqui e funcionou direitinho. Não havia pensado em colocar um margin-left para posicionar o conteúdo ao invés de posicioná-lo "na marra", via position: absolute.Vivendo e aprendendo!Abração, se tiver alguma outra dúvida posto aqui.Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito