29 replies to this topic

[Thyago Henrique]

Pessoal,

Estou montando o layout de um sistema para web e estou com o seguinte problema. A DIV central é auto ajustável, ou seja, o tamanho é definido conforme o conteúdo. O problema é: Preciso colocar outra div dentro só que quando tem uma div dentro da outra a div pai (Central), não aumenta. O que posso fazer?

Alguem me da uma ajuda ai???

[]'s

Thyago

[Kahor]

Voce tem algum código feito ou nada?

Se tiver posta ai pra ver como que tá, porque nao entendi muito bem a pergunta.

[Thyago Henrique]

Voce tem algum código feito ou nada?

Se tiver posta ai pra ver como que tá, porque nao entendi muito bem a pergunta.

E ae. Segue abaixo o código HTML e CSS.

-> HTML

<div id="colEsq">
			<div id="sepEsqcolCentral">
				<div id="conteudoPagina">
					<div id="colCentralMaster">
						<div id="conteudoInterno">
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
							ESTA É A COLUNA QUE TERIA DE AUMENTAR CONFORME O CONTEÚDO
						</div>
					</div>
					<div id="rodapeConteudo"></div>
				</div>
			</div>
			<div id="rodapePagina"></div>		  
		</div>

-> CSS

#colEsq 
{
  width: 943px;
}

#sepEsqcolCentral 
{
  margin:0;
}

#sepEsqcolCentral 
{
  margin-left:200px;
  padding-left:2px;
}

#conteudoPagina 
{
  width: 737px;
  min-height: 450px;
  background-color:#FFFFFF;
  padding:1px 1px;
  border-right: 2px solid #ff8a00;
} 

#colCentralMaster
{
  background-image: url('images/home_promissao.png');
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:top;
  width: 735px;
  min-height: 358px;
}

#conteudoInterno
{
  border-left: 2px solid #fc8e0c; 
  border-right: 2px solid #fc8e0c; 
  width: 712px; 
  position: absolute;
  top: 159px; 
  left: 212px; 
  min-height: 325px;
}

#rodapeConteudo
{
  background-image: url('images/master_10.png');
  width: 735px;
  height: 32px;
}

#rodapePagina
{
  width:943px;
  height:19px;
  background-image: url('images/master_11.png');
}

Me disseram que o min-height não funciona em alguns browsers. Será que pode estar interferindo em alguma coisa também?

Desde já, obrigado!!!

Edição feita por: Thyago Henrique, 25/05/2009, 16:29.

[Kahor]

Cara, eu nao testei aqui mas tira o position: absolute; pra ver se dá certo, e tenta colocar um display:block na div #conteudoInterno

E a DIV central que voce falou que é autoajustavel, mas qual é a central ae?

EDIT:

To vendo aqui se voce tira o position:absolute o texto fica na parte branca..

O que nao deveria tá acontecendo e quais as divs erradas?

Edição feita por: Kahor, 25/05/2009, 15:53.

[Thyago Henrique]

Cara, eu nao testei aqui mas tira o position: absolute; pra ver se dá certo, e tenta colocar um display:block na div #conteudoInterno

E a DIV central que voce falou que é autoajustavel, mas qual é a central ae?

EDIT:

To vendo aqui se voce tira o position:absolute o texto fica na parte branca..

O que nao deveria tá acontecendo e quais as divs erradas?

A DIV central é a colCentralMaster.

Eu fiz isso que vc falou e a tela ficou assim:



Me disseram pra ir organizando a tela utilizando padding e margin mas mesmo com essas duas propriedades do css, não consigo corrigir.

[Kahor]

Mas resolveu o problema??

Margin é o espaço fora da div
Padding o espaço interno

E voce pode usar bordas tambem

border: 10px solid transparent;

Joga um position:relative, que o ponto inicial é onde está agora, o absolute o ponto inicial é o 0px 0px do navegador, entendeu?

[Thyago Henrique]

Mas resolveu o problema??

Margin é o espaço fora da div
Padding o espaço interno

E voce pode usar bordas tambem

border: 10px solid transparent;

Joga um position:relative, que o ponto inicial é onde está agora, o absolute o ponto inicial é o 0px 0px do navegador, entendeu?

Não esta dando certo. eu coloquei o position relative mas não esta dando certo também! Margin e padding também não esta dando certo. Agora não sei se estou fazendo certo o css...da uma olhada no código.

#colCentralMaster
{
	background-image: url('images/home_promissao.png');
	background-repeat:no-repeat;
	background-position:center;
	vertical-align:top;
	width: 735px;
	min-height: 358px;
	margin: -90px -10px;
	padding: 10px;
	position: relative;
}

#conteudoInterno
{
  border-left: 2px solid #fc8e0c; 
  border-right: 2px solid #fc8e0c; 
  width: 712px; 
  min-height: 325px;
  margin:910px 8px;
  padding: 10px -10px -10px -10px;
  position: relative;
}

[Édipo Costa Rebouças]

tiago, vc quuer fazer uma "caixa" com bordas arredondas, é isso?

[Thyago Henrique]

tiago, vc quuer fazer uma "caixa" com bordas arredondas, é isso?

Não seria isso Epido. O que preciso é que a div aumente conforme o conteudo contido nela. O que acontece é que quando coloco o position como relative e as propriedades margin e padding, a tela fica toda bagunçada como nessa imagem....



Abraço

Thyago

[Édipo Costa Rebouças]

mas pelo o que estou vendo isto esta acontecendo, pelo menos nessa div com a borda laranja... a div com fundo laranja parece estar com uma largura maior do que a div com borda laranja... com isso zuando o layout inteiro...

[Thyago Henrique]

mas pelo o que estou vendo isto esta acontecendo, pelo menos nessa div com a borda laranja... a div com fundo laranja parece estar com uma largura maior do que a div com borda laranja... com isso zuando o layout inteiro...

Isso. Na verdade essa div de traz esta mais larga mesmo. Será que isso pode estar interferindo?

[Kahor]

voce jogou uma div dentro da outra, e voce quer que as duas aumentem junto conforme o texto?

[Thyago Henrique]

voce jogou uma div dentro da outra, e voce quer que as duas aumentem junto conforme o texto?

Isso Kahor. Mas esta dando esta bagunça na imagem como mostrei mais acima!!

[Kahor]

nao sei se dá certo usando 2 divs..

tenta usar uma só e usa mais <p><h1> etc..

dá pra voce jogar uma div só e separar o conteudo com paragrafo <P> e editar como se fosse uma div, tenta ae..

[Édipo Costa Rebouças]

thyago, coloca overflow: hidden nessa div com a borda laranja, provavelmente, o layout vai se arrumar e um pedaço da div com fundo laranja vai sumir, caso isso acontece, quer dizer que a div com fundo laranja esta com uma largura muito grande.