Jump to content
Sign in to follow this  
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>

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.