Ir para conteúdo

POWERED BY:

Arquivado

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

thcb2

Problemas com a altura

Por , em Desenvolvimento frontend

Recommended Posts

thcb2    0

thcb2
Postado

Olá, estou desenvolvendo um site, mas encontrei um problema. Gostaria que a div do menu lateral e a div de conteúdo fossem expansíveis, ou seja, se o conteudo for maior, ela crescer, se for menor, diminuir. Resumindo: só crescer se tiver mais conteúdo.

 

No meu código tentei retirar o height especificando uma altura, pensando que assim ela cresceria ou não automaticamente. Mas não deu certo, ocorreram problemas tanto no FF qnto no IE.

 

Eu sei que eu não deveria ter declarado uma altura para a minha div geral (que engloba esses elementos), mas se não declarasse esse height no navegador Firefox ela sumiria. Nos IEs não, eu retirei o height, mas o conteúdo se expandiu conforme o que tinha na página. Mas no Firefox quando retiro o height de algumas divs elas simplesmente somem.

 

Por favor, coloquei o que estou fazendo no ar, para que vcs possam olhar meu código e me ajudar:

 

http://www.propagare.net/thais

 

Obs:tudo que eu declarei como height ao longo do código, eu creio que esteja errado, e por isso gostaria de uma solução pois eles deveriam se expandir caso houvesse mais conteudo.

 

Desde já obrigada a todos

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Não entendi, isso me ajudaria para ser aplicado em qual div?

Isso não é para ser aplicado em uma div especifica, ele é um TUTORIAL de como usar HEIGHT:AUTO; e MIN-HEIGHT:; e impedir que o float:; distorça o layout, para entender faça isso e teste no Firefox:

<style>
#pai{
background:#fc0;
width:500px;
height:auto !important;
min-height:300px;
height:300px;
}
#div1{
float:left;
}
#div2{
float:right;
}
#div1,#div2{
margin:2px;
background:#ddd;
width:120px;
height:auto !important;
min-height:200px;
height:200px;
}
</style>
<div id="pai">
<div id="div1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div id="div2">
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>

Depois que você ver o problema é só testar o do link que eu passei ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

THCB    0

THCB
Postado

Sim, isto eu acho que tinha entendido. É para fazer a div acompanhar o aumento das outras no firefox.

 

Mas meu problema é fazer a div do menu da esquerda acompanhar a div de conteudo do lado direito. Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

sim sim mas você não tinha falado isso, bem ae a solução para o seu problema:

http://forum.imasters.com.br/index.php?showtopic=225319

 

é uma tecnica muito interesante ;)

falow abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

THCB    0

THCB
Postado

Oii silverfox,

 

obrigada pelas dicas...

 

mas entrando agora no primeiro assunto que você falou, tentei aplicar o height:auto e o min-height nas sombras laterais do layout, mas não está funcionando.

 

veja se você pode me ajudar:

 

http://www.propagare.net/thais

 

as sombras não estão crescendo =/

 

desde já obrigada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

eu ainda nao entendi bem o que você quer!

 

abaixo tem um exemplo

 

vê se é mais ou menos isso!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Exemplo de Layout - Aprendiz CSS</title>	 
<style type="text/css"> 
	* { margin: 0; padding: 0; }
	body { text-align: center; }
	#tudo { width: 800px; margin: 0 auto; text-align: left; background: transparent url(fundo.jpg) repeat-y left center; }
	#topo { background-color: #AAC; height: 200px; }
	#esq, #dir { min-height: 400px; height: 400px; height: auto !important; }
	#esq { float: left; width: 200px; background-color: #555;}
	#dir { float: right; width: 580px; background-color: #F00;} 
	#rodape { clear: both; background-color: #AAF; height: 50px;} 
</style>
</head>

<body>
<div id="tudo"> 
	<div id="topo"> Topo </div> 

		<div id="esq">Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
		<div id="dir">Direita</div>

	<div id="rodape">Rodape</div>
</div>
</body>

</html>

 

essa imagem fundo.jpg é essa imagem aqui

 

Imagem Postada

 

qualquer coisa volte a postar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

display:table?

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

acesse o seu site com o firefox3

 

está todo errado!

 

sugiro que resolva primeiro esse problema, pois os proximos serão mais simples!

 

até mais

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

a questão é talvez se no FF3 o seu site for exibido corretamente, o seu problema seja resolvido..

 

eu acredito que seja algo relacionado ao float e ao height

 

mas não posso confirmar nada

 

até

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

 

no meu IE7 num deu certo!!!

 

nem o FF3

 

no IE6 aparentemente deu certo do lado direito!

 

abraço

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

THCB    0

THCB
Postado

Gente, não é possível, eu acho que estou me interpretando mal. Não é possível ninguem saber fazer isso...rsss

 

Olhem esse código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste Altura</title>
<style type="text/css"> 
body{text-align:center; background:#CC3366;}
#geral{margin:auto;}
#fundos{float:left;}
#fundo1{background:#000; width:13px; height:465px;}
#fundo2{background:#0033CC repeat-y;width:13px; height:30px;}
</style>
</head>

<body>
<div id="geral"> 
<div id="fundos"> 
<div id="fundo1"> </div>
<div id="fundo2"> </div>
</div>
<div id="conteudo"> 
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
<p> Teste</p>
</div>
</div>
</body>
</html>

Simples. Eu só quero fazer aquela barrinha azul acompanhar o conteúdo da direita (Teste,Teste,Teste). Ou seja fazer essa barrinha azul ir até onde vai o texto.

 

É muito simples pra quem sabe...rssss alguém me ajuda?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

bem dessa maneira que você passou só aplicando a IDEIA:

ELEMENTOS PAIS E FILHOS.

 

é meio dificil fazer um exemplo vou tentar conforme o que você quer mas dizer isso é um POG(gambiarra)

e recomendo que você tente outro layout, pois esse ficaria "feio" e mal aplicado ;p

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