Jump to content


Photo

Problema Com Div Auto Ajustável


  • Faça o login para participar
29 replies to this topic

#1 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 25/05/2009, 08:56

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??? :rolleyes:

[]'s

Thyago

#2 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 25/05/2009, 11:52

Voce tem algum código feito ou nada?

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

#3 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 25/05/2009, 14:27

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. :rolleyes:

-> 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!!! :D

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


#4 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 25/05/2009, 15:49

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.


#5 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 25/05/2009, 16:12

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:

Posted Image

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

#6 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 25/05/2009, 16:50

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?

#7 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 26/05/2009, 09:37

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


#8 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 26/05/2009, 10:00

tiago, vc quuer fazer uma "caixa" com bordas arredondas, é isso?
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#9 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 26/05/2009, 10:11

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....

Posted Image

Abraço

Thyago

#10 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 26/05/2009, 10:26

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...
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#11 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 26/05/2009, 10:39

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?

#12 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 26/05/2009, 10:42

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

#13 Thyago Henrique

Thyago Henrique

    Turista

  • Usuários
  • 58 posts
  • Sexo:Masculino

Posted 26/05/2009, 10:46

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!!

#14 Kahor

Kahor

    12 Horas

  • Usuários
  • 230 posts
  • Sexo:Masculino

Posted 26/05/2009, 10:48

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..

#15 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 26/05/2009, 10:51

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.
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq