Ir para conteúdo

POWERED BY:

Arquivado

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

Leonardo Machado Moreira

DIV que empurra conteudo conforme aumenta

Por , em Desenvolvimento frontend

Recommended Posts

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

Fala pessoal, dei uma busca em perguntas anteriores, até tem algumas assim, mas as que tem nao me esclarecem, mas a questão enfim a questão é,

 

tenho um layout, que necessáriamente eu tenho que setar left e top, por exemplo este simples código

 

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Posicionamento</title>
		
		<style>
			.div1
			{
				background-color:#FF0000;
				min-height:100px;
				min-width:100px;
				float: left;
			}
			
			.div2
			{
				background-color:#0000FF;
				min-height:100px;
				min-width:100px;
				float:right;
			}
			
			.div3
			{
				background-color:#00FF00;
				min-height:100px;
				min-width:100px;
			}
			
			.botao
			{
				margin-left: 22px; 
				margin-top: 35px;
			}	

												 .text
			{
				height:300px;
				width:300px;
			}			
		</style>
			
		<script>
			window.onerror = erros;
			function erros(msg, url, line)
			{
				window.alert("Erro Encontrado: "+msg+". \nLinha: "+line+".\nURL: "+url);
			}		
			
			function aumenta(div)
			{
				document.getElementById(div).innerHTML = "<input type='text'   class='text' />";
			}
		</script>
		
		
	</head>
	<body>
		<div id='div1' class='div1'><input id='botao1' type='button' class='botao' value='esticar' onclick="aumenta('div1')"/></div>
		<div id='div2' class='div2'><input id='botao2' type='button' class='botao' value='esticar' onclick="aumenta('div2')"/></div>	
		<div id='div3' class='div3'><input id='botao3' type='button' class='botao' value='esticar' onclick="aumenta('div3')"/></div>			
	</body>
</html>

tenho muitas duvidas referentes a ele, como por exemplo... primeiro, antes de clicar em qualquer botão, eu gostaria de fazer o quadrado verde, respeitar o tamanho de 100px x 100px como os outros, e também , eu gostaria que ele aparece-se em baixo do quadrado vermelho

formando assim

 

vermelho azul

verde

 

sem espaço algum entre os tres, e assim ao clicar no botao para redimencionamento, o quadro que for aumentado empurrasse os outros dois, sem passas por cima deles,,,

como fazer isso sem e com espaço entre eles??

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

caraca

 

tente explicar as duvidas melhor..

 

separar o que quer perguntar para facilitar o entendimento

 

 

os espeços entre uma e outra pode ser definido com margin: 0;

 

voce usou min-width: e min-height:

 

 

isso significa que é o tamanho minimo suportado....

 

caso queira um tamanho maximo utilize max-width e max-height

 

 

caso queria exato

 

use width: e heigth:

 

 

será que ajudei em alguma coisa?

 

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

hehe, foi mal a confusão entao vamos lá,

 

1º Eu gostaria de limitar todos os boxes para 100 x 100. (Isto funciona com min- e max- porém entra em conflito com a duvida 2)

 

2º Ao clicar no botão dentro da div, como da pra notar ele cria uma caixa de text maior que a div, tanto em altura como em largura. Oque eu gostaria de fazer é que ao aumentar essa div os boxes ao lado e em baixo fosses empurrados para baixo e para o lado. Na maneira que acontece hoje, eles nao sabem de lugar, logo ficam em cima da div redimensionada.

 

3º Sem as propriedades max-height e max-widht que o Paulo mensionou, ou seja o layout normal como eu postei, os boxes nao ficam corretamente na tela, os boxes azul e verde, sao esticados até o fim da tela. Lembrando que eu gostaria de mantelos 100 x 100. Mas podendo ser redimencionados conforme seu conteudo.

 

4º No exemplo atual, não existem espaços entre os divs, eu gostaria de criar um espaço entre eles, e ainda continuar respeitando o item 2 que quando um é redimensionado o outro é empurrado, porém nesse caso ele só vai ser empurrado se o redimensionamento for maior que o espaço dado.

 

Bom Com certeza assim ta bem mais organizado. Foi mal Vacilo Meu

 

Obrigado Pela Atenção

 

Ah Sobre, postar um link eu sou novo nisso e nao manjo muito sobre hospedagem , mas vou dar uma olhada no google como faz, e assim que eu conseguir eu deixo um link

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

VAMOS LÁ

 

 

hehe, foi mal a confusão entao vamos lá,

 

1º Eu gostaria de limitar todos os boxes para 100 x 100. (Isto funciona com min- e max- porém entra em conflito com a duvida 2)

min-height=> tamanho minimo, independente da resolução, cria scroll na pagina depois disso

height=> tamanho normal, vai reduzindo o tamanho da div

max-height-> tamanho maximo que a div pode chegar, independente da resolução

 

o mesmo funciona para width:

 

faça alguns testes com essas propriedades que ai sim entenderá direitinho

 

2º Ao clicar no botão dentro da div, como da pra notar ele cria uma caixa de text maior que a div, tanto em altura como em largura. Oque eu gostaria de fazer é que ao aumentar essa div os boxes ao lado e em baixo fosses empurrados para baixo e para o lado. Na maneira que acontece hoje, eles nao sabem de lugar, logo ficam em cima da div redimensionada.

não entendi bem

 

mas vamos lá

 

cria o TEXT maior devido a class configurado com a class = text

 

 

esse outro problema

 

creio que seja por causa do float

 

 

3º Sem as propriedades max-height e max-widht que o Paulo mensionou, ou seja o layout normal como eu postei, os boxes nao ficam corretamente na tela, os boxes azul e verde, sao esticados até o fim da tela. Lembrando que eu gostaria de mantelos 100 x 100. Mas podendo ser redimencionados conforme seu conteudo.

os min

min-width:

min-height;

 

são o tamanho MINIMO que a div deve ter

 

para melhor usar, crie somente com width e height

 

4º No exemplo atual, não existem espaços entre os divs, eu gostaria de criar um espaço entre eles, e ainda continuar respeitando o item 2 que quando um é redimensionado o outro é empurrado, porém nesse caso ele só vai ser empurrado se o redimensionamento for maior que o espaço dado.

defina uma margem a esquerda

 

margin-left: 10px;

 

Ah Sobre, postar um link eu sou novo nisso e nao manjo muito sobre hospedagem , mas vou dar uma olhada no google como faz, e assim que eu conseguir eu deixo um link

 

no forum de PHP tem bastante coisa

 

 

cansei de escrever

hsaushaushauhsaa

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

no caso 2,

 

sim a Text fica maior que a DIV de propósito eu fiz isso para ver a div aumentar mesmo, pois o real problema é fazer a DIV aumentar, e ao aumentar empurrar as outras para a direita e para baixo, de modo que as imagens não fiquem encavaladas.

 

Muito Obrigado Pela Atençao

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

#div{

min-width: 100px;

width: auto !important;

width: 100px;

}

 

sim realmente está eu fiz, isso pela sua dica acima, mas retirando os min- nao muda nada no layout alem dos boxes perderem o padrao, 100x100,, mas os dois da direita continuam até o fim do mesmo jeito, neste caso nao muda nada além de fazer eles perderem o tamanho inicial

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu tinha visto a página on line, mas agora que voltei para verificar o código, você retirou ela..

Bom, tem como postar novamente o código mais atual? ou colocar on line denovo?

 

Eu acho que entendi oque você ta querendo fazer... bem interessante...

só fiquei confuso qnto ao você transformar em um "input text", depois que clica... era isso mesmo?

Ou só era pra DIV aumentar de tamanho empurrando as outras... assim:

 

Vermelha | Azul |

Vermelha | Azul |

Vermelha | Azul |

________

Verde |

Verde |

Verde |

 

Ai depois que clicasse, na vermelha por exemplo :

 

Vermelha Vermelha | Azul |

Vermelha Vermelha | Azul |

Vermelha Vermelha | Azul |

Vermelha Vermelha |

Vermelha Vermelha |

Vermelha Vermelha |

________

Verde |

Verde |

Verde |

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

:lol: Ufa!

Depois de muito tentar, matutar, pesquisar, enfim o tópico sobre min-height float do silverfox, me ajudou e consegui o seguinte:

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Posicionamento</title>

<style type="text/css">

/* código feito por tiu uiLL */

* { /* zerando propriedades, com seletor glogal */

margin: 0;

padding: 0;

}

body{

margin-left: 50px; /* só para vizualizar sem estar "grudado na borda" */

margin-top: 50px;

}

#plataforma{

overflow:hidden;

height:1px;

clear:both;

}

/*hack para fazer o min-height somente no IE6, sem alterar os outros */

*html #div1, *html #div2, *html #div3 {

height: 100px;

width: 100px;

}

/* fim hack IE6 */

 

 

#div1 {

background-color:#00f; /* Azul */

min-height: 100px;

min-width: 100px;

float: left;

}

#div2 {

background-color:#0f0; /* Verde */

min-height: 100px;

min-width: 100px;

float: left;

}

#div3 {

background-color:#f00; /* Vermelha */

min-height:100px;

min-width:100px;

float: left;

}

.botao {

margin-left: 22px;

margin-top: 35px;

}

.text {

height:300px;

width:300px;

}

</style>

<script type="text/javascript">

window.onerror = erros;

function erros(msg, url, line)

{

window.alert("Erro Encontrado: "+msg+". \nLinha: "+line+".\nURL: "+url);

}

function aumenta(div){

document.getElementById(div).innerHTML = "<div class='text'></div>";

}

</script>

</head>

<body>

<div id="div3">

<input id='botao3' type='button' class='botao'

value='esticar' onclick="aumenta('div3')"/>

</div><!-- fecha div 3 Vermelha -->

 

<div id="div1">

<input id='botao1' type='button' class='botao'

value='esticar' onclick="aumenta('div1')"/>

</div><!-- fecha div 1 Azul -->

 

<div id="plataforma"></div>

<div id="div2">

<input id='botao2' type='button' class='botao'

value='esticar' onclick="aumenta('div2')"/>

</div><!-- fecha div 2 Verde -->

</body>

</html>

^^ espero que seja exatamente isso que você qr.. hauhuahuah :D

Testei nos navegadores IE7, IE6(esse apresentou problemas com os height minimo, ai tive que usar um hack pra ele ;) ), Opera, FF e Safari. http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif

 

http://www.cenasordidas.hbe.com.br/exemplo...s_aumentam.html

 

Só para completar o post, se você quiser um espaço entre eles..

#div1, #div2, #div3 {
	margin: 10px; /* aqui você coloca onde e qnto você qr, coloquei 10px em todas só pra testar */
}

^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

puts cara, mto bom tiu uiLL era exatamente isso. Bom o Tópico poderia se encerrar assim, mas só por curiosidade vou abusar da boa vontade de voces, e também porque daria uma estética mto legal, É possivel ligar um box ao outro, por exemplo:

 

Inicialmente a tela é assim

 

vermelho | azul

vermelho | azul

vermelho | azul

________

verde

verde

verde

 

Ligar um box ao outro, seria por exemplo, ao clicar no vermelho ele dobra de largura e de algura, teria como fazer o azul dobrar de altura porém manter a largura, e o verde dobrar de largura mas manter a altura??

 

Ao Clicar

 

vermelho vermelho | azul

vermelho vermelho | azul

vermelho vermelho | azul

vermelho vermelho | azul

vermelho vermelho | azul

vermelho vermelho | azul

_________________

verde verde

verde verde

verde verde

 

um pouco mais dinamico.. e o mesmo acontecer, caso eu clique no azul por exemplo, o vermelho dobrar de altura mas manter a largura, e assim sucessivamente..

 

Agradeço a todos as dicas e a atenção

 

 

 

 

ah sobre o link de divs aumentam, eu nao vi, porque o a empresa bloqueou, nao sei pq, acho que aki o negocio é por palavra e ai ordidas acho que foi bloqueado rsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

voc~e consegue isso com Javascript!!!

 

mas ai acho melhor falar com eles

 

 

se usar o jquery, talvez consiga fazer alguma coisa mais facil

 

mas ai é com o pessoal de JS

 

 

abraço

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