Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
} #tudo {
width: 900px;
}
} #tudo {
width: 600px;
}
} #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;
}display: inline;
margin: 0px 62px 0px 0px;
}text-decoration:none;
color:#FFFFFF;
outline: 0;
}text-decoration:none;
color:#FFFFFF;
outline: 0;
} 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;
} 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;
} color:#FFFFFF;
margin-top:115px;
margin-left:7px;
position:absolute;
font-size:12px;
font-family:Arial;
max-width:310px;
line-height: 18px;
} 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;
}color:rgb(225,185,59);
outline: 0;
}color:rgb(225,185,59);
outline: 0;
} 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;
}Carregando comentários...