Ir para conteúdo

POWERED BY:

Arquivado

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

Alvaro Jr

Muda css junto com resolução

Por , em Desenvolvimento frontend

Recommended Posts

Alvaro Jr    2

Alvaro Jr
Postado

Tenho 3 divs,

queria muda as propriedade delas para elas ficarem

menores, tipo witdh 100%

e uma em baixo da outra tiipo float left - morre,

quando eu muda a resoluçao da minha tela estilo layout responsivo

 

meu css é esse aqui

 

 
.bloco1{
width:698px;
height:300px;
float:left;
 
background-color:#930;
}
.bloco2{
width:300px;
height:300px;
float:left;
margin-left: 2px;
background-color:#09F;
}
.bloco3{
width:1000px;
height:300px;
margin-top:2px;
float:left;
background-color:#F03;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado 



 



.bloco1{



width:40%;



height:300px;



float:left;



 position:relative;



background-color:#930;



}



.bloco2{



width:40%;



height:300px;



float:left;



margin-left: 2px;



background-color:#09F;



}



.bloco3{



width:40%;



height:300px;



margin-top:2px;



float:left;



background-color:#F03;



}



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
xanburzum
			  

	
		
	
			 169
	
		
	

		

		

			


	
		xanburzum
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

olha este exemplo que interessante para testar.


 


<!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=utf-8" />
	<title>Seletor de Visualização</title>
	<link rel="stylesheet" href="http://chocotemplates.com/preview/preview.css" type="text/css" media="all" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="http://chocotemplates.com/preview/preview.js" type="text/javascript"></script>
</head>
<body class="html">
<div id="customize">
	<div id="customize-holder">
		<h2>Compatibilidade</h2>
		
				<div class="responsive">
			<a href="#" rel="desktop">Desktop</a>
			<a href="#" rel="tablet">Tablet</a>
			<a href="#" rel="mobile">Mobile</a>
		</div>
				
					<h3>Selecione abaixo</h3>
				
		<div class="colors">
			<div class="cl"> </div>
						<ul>
				<li>
					<a href="" class="color" style="color:#">
												<strong>Visualizando...</strong>
					</a>
					<ol>
												<li><a href="fone.htm">Fone</a></li>
												<li><a href="beneficios.htm">Beneficios</a></li>
												<li><a href="associe-se.htm">Associe-se</a></li>
											</ol>
				</li>
			</ul>
						<div class="cl"> </div>
		</div>
		

	</div>
</div>
<div class="iframe-holder">
	<iframe id="frame" src="" width="100%" scrolling="auto" frameborder="0"></iframe>
</div>
</body>
</html>


mude as páginas para sua



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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