Ir para conteúdo

Arquivado

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

Biel.

exibir conteúdo da div

Recommended Posts

Boa tarde a todos. Direto ao ponto. Pessoal abaixo temos div1 e div 2

 

Gostaria que quando o site fosse acessado na resolução 500px pra baixo a div 1 ficasse debaixo da div 2 e o conteúdo da div 1 aparecesse normalmente.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

@media screen and (max-width:99999px){ 
#_1{ width:240px; height:240px; float:left; background:#060; }	
}

@media screen and (max-width:99999px){ 
#_2{ width: 240px; height: auto; margin-left:254px;  background:#09F; position: absolute; 
	}
}


@media screen and (max-width:500px){  	
#_2{ width:240px; height: auto; float:left; background:#09F; margin-left:0px; margin-bottom:20px;}
}

@media screen and (max-width:500px){ 
#_1{
	width:240px; height:240px; background:#060; margin-left:0px; clear:both;

	}	
}

</style>

</head>

<body>

<div id="_1"><h1>conteudo da div 1</h1></div>
<div id="_2"><h1>conteudo da div 2</h1></div>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caro @biel, fazer essa alteração:

@media screen and (max-width:500px){ 
  #_1{
    width:240px;
    height:240px;
    background:#060;
    margin-left:0px;
    clear:both;
    margin-top: 117px;
  }    
}

E também não precisa usar @media para esse tipo de "resolução" (99999px), é só coloca-la normalmente. A edentação do código também facilita na hora de outra pessoa ajudar. Não faz sentido também querer inverter as ordens dos elementos HTML com CSS, mas, é possível com meios pouco responsivos... No mais, abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caro @biel, fazer essa alteração:

@media screen and (max-width:500px){ 
  #_1{
    width:240px;
    height:240px;
    background:#060;
    margin-left:0px;
    clear:both;
    margin-top: 117px;
  }    
}

E também não precisa usar @media para esse tipo de "resolução" (99999px), é só coloca-la normalmente. A edentação do código também facilita na hora de outra pessoa ajudar. Não faz sentido também querer inverter as ordens dos elementos HTML com CSS, mas, é possível com meios pouco responsivos... No mais, abraço.

goodeathx obrigado por postar. Veja: com margin-top: 117px; nunca vai dar certo, visto que o height da div 2 é auto e não um height com altura fixa por exemplo. Se o height fosse com altura fixa resolveria o problema.

 

A única forma de resolver o problema é deixando div 1 abaixo da div 2, independentemente de quando conteúdo tenha a div 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vc quer que a DIV 1 fique abaixo e DIV 2 em cima? Se for isso mesmo:

@media screen and (max-width:500px){ 
	#_1{
		width: 240px;
		height: 240px;
		background: #060;
		margin-left: 0px;
	}	
	#_2{
		position: relative; 
	}
}



<div id="_2"><h1>conteudo da div 2</h1></div>
<div id="_1"><h1>conteudo da div 1</h1></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

goodeathx obrigado por postar. Veja: com margin-top: 117px; nunca vai dar certo, visto que o height da div 2 é auto e não um height com altura fixa por exemplo. Se o height fosse com altura fixa resolveria o problema.

 

A única forma de resolver o problema é deixando div 1 abaixo da div 2, independentemente de quando conteúdo tenha a div 2

 

Realmente não vejo lógica em fazer isso, exceto em caso de um experimento... Vou ver a solução do amigo acima e dar uma olhada se dá pra fazer algo melhorzinho.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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