Olá boa tarde estou tendo um problema com um site que estou tentando criar , quando dou zoom as coisas saem do lugar , alguém poderia me ajuda me explicando o por que acontece isso , muito obrigado pela atenção !!! abraços
<!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>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/jquery-migrate-3.0.0.min.js" ></script>
<style type="text/css">
body {
background-image: url(projeto/imagens/fundo.jpg);
}
</style>
<script type="text/javascript">
function setaImagem(){
var settings = {
primeiraImg: function(){
elemento = document.querySelector("#slider a:first-child");
elemento.classList.add("ativo");
this.legenda(elemento);
},
slide: function(){
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
settings.legenda(elemento.nextElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
},
proximo: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
settings.legenda(elemento.nextElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
intervalo = setInterval(settings.slide,4000);
},
anterior: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.previousElementSibling){
elemento.previousElementSibling.classList.add("ativo");
settings.legenda(elemento.previousElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
elemento = document.querySelector("a:last-child");
elemento.classList.add("ativo");
this.legenda(elemento);
}
intervalo = setInterval(settings.slide,4000);
},
legenda: function(obj){
var legenda = obj.querySelector("img").getAttribute("alt");
document.querySelector("figcaption").innerHTML = legenda;
}
}
//chama o slide
settings.primeiraImg();
//chama a legenda
settings.legenda(elemento);
//chama o slide à um determinado tempo
var intervalo = setInterval(settings.slide,4000);
document.querySelector(".next").addEventListener("click",settings.proximo,false);
document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}
window.addEventListener("load",setaImagem,false);
<!--Final do slide-->
</script>
</head>
<body>
<div id="logo"></div><!--div final do logo-->
<div id="topo"></div><!--div final topo-->
<div id="menufundo">
<nav id="ul">
<ul>
<li><a href="#" title="Página Inicial">Página Inicial</a></li>
<li><a href="#" title="Quem Somos">Quem Somos</a></li>
<li><a href="#" title="Áreas de Cobertura">Áreas de Cobertura</a></li>
<li><a href="#" title="Serviços">Serviços</a></li>
<li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
</ul>
</nav>
</div>
<div id ="fundoinicial">
<figure>
<span class="trs next" title="Próximo"></span>
<span class="trs prev" title="Voltar"></span>
<div id="slider">
<a href="#" class="trs"><img src="imagens/img1.jpg" alt="Trabalhamos com Diversos Produtos e Modelos"/></a>
<a href="#" class="trs"><img src="imagens/img2.jpg" alt="Qualidade em Atendimento" /></a>
<a href="#" class="trs"><img src="imagens/img3.jpg" alt="Oficina Qualificada" /></a>
<a href="#" class="trs"><img src="imagens/img2.jpg" alt="1" /></a>
<a href="#" class="trs"><img src="imagens/img3.jpg" alt="2" /></a>
</div>
<figcaption></figcaption>
</figure>
</div>
<div class="rodape">
<a href="https://www.facebook.com/Alfatec-Autorizada-Electrolux-1737242946511224/" title="Facebook" target="_blank">
<img id= "facebook" src="imagens/facebook-logo (2).png" alt="FaceBook" width="24" class="facebook" >
</a>
</div><!--div final menufundo-->
<h1><a href="https://goo.gl/maps/7AcuvvbGKnQ2" target="_blank" title="Abrir Mapa">Localização</a></h1>
<p><a href="https://goo.gl/maps/7AcuvvbGKnQ2" target="_blank" title="Abrir Mapa">R. Profᵃ José Azevedo Minhoto, 206<br />
Osasco - SP, 06080-125</a></p2>
<div class="trabalhe" > <h2>Trabalhe Conosco</h2></div>
<div class="email" > <p>alfatec@alfatec.com</p></div>
<div class="purificador" >
<img ="purificador" src="imagens/purificador.png" alt="Purificadores" title="Purificadores" />
</div>
<div class="fogao" >
<img ="fogao" src="imagens/fogao.png" alt="Fogão" title="Fogão Cooktop e Coifas" />
</div>
<div class="geladeira">
<img "geladeira" src="imagens/geladeira.png" alt="Geladeira" title="Geladeiras" />
</div>
<div class="maquina">
<img "maquina" src="imagens/maquina.png" alt="Maquinas" title="Maquinas Lava e Seca" />
</div>
<div class="ar">
<img "ar" src="imagens/ar.png" alt="Arcondicinados" title="Ar condicionados e Climatizadores" />
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#topo {
background:url(../imagens/topo.png);
position:inherit;
width:1024px;
height:190px;
border-bottom:none;
margin:auto;
}
#logo {
float:left;
background:url(../imagens/logoc.png);
position:absolute;
top:50px;
left:155px;
width:541px;
height:133px;
}
#fundoinicial {
background-image:url(../imagens/fundoof.png);
width:1024px;
height:1230px;
margin:auto;
}
#menufundo {
background:url(../imagens/menu.png);
position:relative;
width:1024px;
height:27px;
margin:auto;
}
#ul li a{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:normal;
list-style-type:none;
display: inline;
font-size:20px;
line-height:0px;
padding:10px;
margin:4px 0 0 52px;
color:#FFF;
text-decoration:none;
float:left;
}
#ul li a:hover{
text-shadow:0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black;
font-size:20px;
color:black;
}
.rodape {
background: url(../imagens/rodape.png);
margin: auto;
position: absolute;
width: 1100px;
height: 99px;
left: 131px;
top: 1400px;
}
.trs {-webkit-transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-ms-transition:all ease-out 0.5s;
transition:all ease-out 0.5s;}
#slider {
position: absolute;
width: 970px;
height: 339px;
margin:auto;
left: -22px;
top: 1px;
border: 1px solid #666;
border-radius: 10px 10px 10px 10px;
}
#slider a {
position:absolute;
width: 850px;
height: 290px;
margin:auto;
left: 60px;
top: 2px;
opacity: 0;
filter: alpha(opacity=0);
}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}
/*controladores*/
span {
background: none;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
bottom: 40%;
width: 43px;
height: 43px;
z-index: 5;
}
.next {
right: 12px;
}
.next:before,.next:after {left: 21px;}
.next:before {
-webkit-transform: rotate(-42deg);
top: 5px;
}
.next:after {
-webkit-transform: rotate(-132deg);
top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
height: 20px;
background:#000;
width: 1px;
position: absolute;
}
.prev {
left: -12px;
}
.prev:before,.prev:after {left: 18px;}
.prev:before {
-webkit-transform: rotate(42deg);
top: 5px;
}
.prev:after {
-webkit-transform: rotate(132deg);
top: 19px;
}
figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
max-width: 950px;
height: 310px;
position: relative;
top:60px;
left:0px;
margin:0px 0 0 50px;
}
figcaption {
border-top: 0.2px solid #000;
border-radius: 0px 0px 10px 10px;
color:#FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
text-align: center;
background: #60365e;
width: 970px;
position: absolute;
margin: auto;
bottom: -34px;
left: -21px;
line-height: 35px;
height: 35px;
}
h1 a{
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 172px;
top: 1412px;
}
p a{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 172px;
top: 1442px;
}
.facebook{
width:32px;
right:32px;
position:absolute;
top:25px;
left:512px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.facebook:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.trabalhe {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 994px;
top: 1412px;
width: 159px;
}
.email {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
margin-top: 20px;
left: 995px;
top: 1416px;
}
.purificador img {
position: absolute;
width : 130px;
height: 130px;
top: 950px;
right:1020px;
}
.purificador img:hover {
opacity: 0.5;
filter: alpha(opacity=30);
}
.fogao img {
position: absolute;
width: 130px;
height: 130px;
top: 950px;
right: 820px;
}
.fogao img:hover {
opacity: 0.5;
filter: alpha(opacity=30);
}
.geladeira img {
position:absolute;
width:150px;
height:200px;
top:880px;
right:610px;
}
.geladeira img:hover {
opacity: 0.5;
filter: alpha(opacity=30);
}
.maquina img {
position: absolute;
width: 115px;
height: 165px;
top: 915px;
right: 450px;
}
.maquina img:hover {
opacity: 0.5;
filter: alpha(opacity=30);
}
.ar img {
position: absolute;
width: 200px;
height: 130px;
top: 946px;
right: 200px;
font-size:36px;
}
.ar img:hover {
opacity: 0.5;
filter: alpha(opacity=30);
}
Desculpa por alguns erros é que eu estou aprendendo agora , toda ajuda é bem-vinda agradeço pela atenção e pelo espaço para tirar duvidas aqui no forum , Muito obrigado novamente !!!!