Ir para conteúdo

Arquivado

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

VitorSC

[Resolvido] Imagem Fatiada x Resolução

Por , em Desenvolvimento frontend

Recommended Posts

VitorSC    0

VitorSC
Postado

Boa tarde, bom eu li bastante sobre media queries, etc, porém para o meu caso não funcionou é o seguinte:

Eu tenho um layout que eu fatiei e o tamanho total dele(largura) é igual 1440px para se adaptar para qualquer resolução, porém essas imagens fatiadas estão montadas em várias divs, exemplo:

 

div#esquerda {background:url:(...);width:200px;}

div#topo {background:url:(...);with:400px;}

div#direita {background:url:(...);width:200px;}

div#conteudo {background:url:(...);width:400px;}

div#rodapé {background:url:(...);width:400px;}

 

e quando eu abro em uma resolução menor automaticamente acontece o overflow:scroll, e eu queria nesse caso diminuir a imagem digamos para poder centralizar na tela e não ficar sobras nos lados da mesma, se fosse uma imagem só seria moleza porém como é tudo montado em partes eu me ferrei, tipo eu pensei em colocar tudo dentro de uma div principal e ali trabalhar os "widths" mas eu fiz isso e coloquei na mao e não adiantou, se quiserem eu posto o html e css para vocês verem, valeu galera:

 

 <!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>
	<title>Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="estilo.css" /> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("ativo");
		});
	</script>
</head>
<body>
<div id="tudo">	
	<div id="left"> 
		<div id="left_logo">    					
		</div>            
           <div id="menuHor">			
			<ul>
				<li><a href="index.html" title="Home" class="menu">Home</a></li>
				<li><a href="empresa.html" title="Empresa" class="menu">Empresa</a></li>
				<li><a href="tecnologia.html" title="Tecnologia" class="menu">Tecnologia</a></li>
				<li><a href="projetos.html" title="Projetos Especiais" class="menu">Projetos Especiais</a></li>
				<li><a href="cases.html" title="Cases" class="menu">Cases</a></li>
				<li><a href="downloads.html" title="Downloads" class="menu">Downloads</a></li>
				<li><a href="contato.html" title="Contato" class="menu">Contato</a></li>				
			</ul>   		
           </div>			
        </div>			 
       <div id="logo">		
	</div>					
	<div id="right_logo">		
	</div>						
       <div id="gover">		            				
		<div id="right_gov">			
		</div>			
	</div>		
       <div id="bottom_gov">
		<span id="titulo">Governança de TI</span>				
           <p id="GovPar"> 
			O grande desafio do Governante de TI é o de transformar os processos em "engrenagens" que
  			    funcionem de forma sincronizada a ponto de demonstrar que a TI não é apenas uma área de 
			suporte ao negócio e sim parte fundamental da estratégia das organizações.
		</p>
		<span id="titSeg">Segurança da Informação</span>				
           <span id="titAmb">Arquitetura ambientes de TI</span>				
		<span id="titGov">Governança de TI</span>				
		<span id="titEmp">Nossa Empresa</span>
		<p id="EmpPar">
			Especializada em desenvolver estratégias <span class="ativo">sustentáveis</span> 
			capazes de promover diferenciais competitivos através
			da utilização da <span class="ativo">tecnologia da informação</span>.
		</p>
		<span id="titAde">Adequação Bla bla</span>
		<p id="AdePar">
			Saiba mais sobre este
			padrão e conheça suas
			vantagens.
		</p>
	    <span id="titFal">Fale Conosco</span>
		<p id="FalePar" class="ativo">
			<a href="contato.html" id="Fale">contato@teste.com.br</a>
		</p>
		  <br />
		<span id="fone">(48) 4747-4747</span>
		  <br />
		<span id="FaleConosco">								
			Rua teste
		</span>
	</div> 
       <div id="footer">
	  <br />	
		<div style="margin-left:245px;line-height:20px;">
			<span style="font-size:12px;font-family:Arial;font-weight:bold;color:black;">Navegação</span>
			<br />				
			<span style="font-size:12px;font-family:Arial;color:black;">Home | Empresa | Tecnologia | Projetos Especiais | Cases | Downloads | Contato</span> 
		</div>
       </div>  		
</div>
</body>
</html>

 

E o css:

 

* {
padding:0;
margin:0;
}
@media screen and (max-width:1024px){
 #tudo {
   width: 900px;
 }
}
@media only screen and (min-width : 481px) and (max-width : 768px) {
 #tudo {
   width: 600px;
 }
}
@media only screen and (max-width : 480px) {
 #tudo {
   width: 400px;
 }
}
#left_logo{
background:url("images/left_logo.png") no-repeat scroll;
width:363px;
height:155px;
margin-left:245px;		
}
#left {
   background:url("images/left_gov.png") no-repeat scroll;  	
width:245px;
height:617px;	
}
#logo {
background:url("images/logo.png") no-repeat scroll;  
width:232px;
height:155px;	
margin-left:607px;
   margin-top:-617px;
}
#right_logo {
   background:url("images/right_logo.png") no-repeat scroll;  
width:600px;
height:155px;		
margin-left:839px;		
margin-top:-155px;	
}
#gover {
background:url("images/governanca.png") no-repeat scroll;  
width:950px;
height:246px;
margin-left:245px;			
}
#right_gov {
   background:url("images/right_gov.png") no-repeat scroll;  
width:244px;
height:462px;
margin-left:950px;	
}
#bottom_gov {
   background:url("images/bottom_gov.png") no-repeat scroll;  
width:950px; 
height:216px;
margin-left:245px;	
}
#footer {
   background:url("images/footer.png") no-repeat scroll;  
width:1439px;
height:81px;	
}

#menuHor ul {
padding:0px;			
float: left;	
width: 965px;			
list-style:none;			
margin-left:270px;
margin-top:-42px;
font-family:Arial;	
}
#menuHor ul li {
display: inline; 
margin: 0px 62px 0px 0px;		
}
a.menu:link {
text-decoration:none;
color:#FFFFFF;
outline: 0;
}
a.menu:visited {
text-decoration:none;
color:#FFFFFF;
outline: 0;
}
a.menu:hover{
   color:rgb(225,185,59);
text-decoration:none;	
outline: 0;
}
.ativo{
color:rgb(225,185,59) !important;
text-decoration:none;
outline: 0;    
}
#titulo {
color:#FFFFFF;
margin-top:-225px;
margin-left:32px;
position:absolute;
font-size:25px;
font-family:Arial;
font-weight:bold;
}
p#GovPar {
   color:#FFFFFF;
margin-top:-175px;
margin-left:32px;
position:absolute;
font-size:15px;
font-family:Arial;    
   max-width:650px;
   line-height:30px;	
}
#titSeg {
color:#FFFFFF;
margin-top:-40px;
margin-left:28px;
position:absolute;
font-size:20px;
font-family:Arial;
font-weight:bold;
text-shadow: 0.1em 0.1em 0.2em black;
}
#titAmb {
color:#FFFFFF;
margin-top:-40px;
margin-left:340px;
position:absolute;
font-size:20px;
font-family:Arial;
font-weight:bold;	
}
#titGov {
color:#FFFFFF;
margin-top:-40px;
margin-left:710px;
position:absolute;
font-size:20px;
font-family:Arial;
font-weight:bold;
   text-shadow: 0.1em 0.1em 0.2em black;		
width:175px;
}
#titEmp {
color:#FFFFFF;
margin-top:80px;
margin-left:5px;
position:absolute;
font-size:26px;
font-family:Arial;
}
#titAde {
color:#FFFFFF;
margin-top:80px;
margin-left:327px;
position:absolute;
font-size:20px;
font-family:Arial;	
   text-shadow: 0.1em 0.1em 0.2em black;		
}
#titFal {
color:#FFFFFF;
margin-top:80px;
margin-left:785px;
position:absolute;
font-size:26px;
font-family:Arial;	
width:165px;
}
p#EmpPar {
   color:#FFFFFF;
margin-top:115px;
margin-left:7px;
position:absolute;
font-size:12px;
font-family:Arial;    
   max-width:310px;
line-height: 18px;
}
p#AdePar {
   color:black;
margin-top:110px;
margin-left:330px;
position:absolute;
font-size:16px;
font-family:Arial;    
   max-width:200px;
font-weight:bold;		
text-shadow: 0.1em 0.1em 0.1em white;		
}
#FalePar {
color:#FFFFFF;
margin-top:115px;
margin-left:800px;
position:absolute;
font-size:12px;
font-family:Arial;        	
}
a#Fale:link {	
color:rgb(225,185,59);
outline: 0;
}
a#Fale:visited {	
color:rgb(225,185,59);
outline: 0;
}
a#Fale:hover{
   color:rgb(225,185,59);	
outline: 0;
}
#fone {
color:#FFFFFF;
margin-top:115px;
margin-left:860px;
position:absolute;
font-size:12px;
font-family:Arial;
font-weight:bold;		
width:90px;
}
#FaleConosco {
color:#FFFFFF;
margin-top:115px;
margin-left:642px;
position:absolute;
font-size:12px;
font-family:Arial; 	
width:305px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Mas você declarou tamanhos, espaçamentos e fundos de todos os elementos fora do media querie.

 

Bom, para trabalhar com media querie, eu sugiro a seguinte ordem:

 

- Faça todo o seu layout na proporção máxima que você dispõe;

 

- Feito, mova (copiando seletores por completo) para uma hierarquia de @media todos os atributos de tamanhos (width e height), espaçamentos (margin e padding) e aqueles mais que você notar que irão se alterar nas demais resoluções;

 

- Copie esta hierarquia, e declare para a próxima resolução menor, e altere-a conforme o layout dispõe. Neste ponto você também pode ocultar elementos que talvez "desaparecerão" conforme menor a tela;

 

- Repita o passo anterior até a menor tela projetada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

VitorSC    0

VitorSC
Postado

Putz eita detalhe, coloquei para cada resolução um estilo diferente conforme você citou colocando todos os seletores por completo e deu certo fiz vários testes e atendeu as minhas expectativas, obrigadão ae!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Que bom que conseguiu! :clap:

 

Lembre-se de modularizar seu CSS também. Ou seja, agrupe (ou use classes globais) tudo aquilo que tenha atributos semelhantes. Isto, para diminuir um pouco o tamanho do arquivo, pois com media queries, os arquivos CSS tendem a ficar de 2 a 4 vezes maior. :thumbsup:

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