Zoom destrói pagina

Caio Wesley · Maio 26, 2017

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 !!!!

lowys · Maio 26, 2017

<!doctype html>
<html>
   <head>
      <meta charset='utf-8'>
      <title>Alfatec</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel='stylesheet' href='css/style.css'>
   </head>
   <body>
      <main>
         <header id="topo">
            <div id="logo">Logo</div><!--div final do logo-->
            <nav>	  	
               <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>
         </header><!-- final topo-->

         <section>
            <figure>
               <span class="trs next" title="Próximo"></span>
               <span class="trs prev" title="Voltar"></span>

               <div id="slider">
                  <a href="#"><img src="imagens/img1.jpg" alt="Trabalhamos com Diversos Produtos e Modelos"/></a>				
                  <a href="#"><img src="imagens/img2.jpg" alt="Qualidade em Atendimento" /></a>
                  <a href="#"><img src="imagens/img3.jpg" alt="Oficina Qualificada" /></a>
                  <a href="#"><img src="imagens/img4.jpg" alt="1" /></a>
                  <a href="#"><img src="imagens/img5.jpg" alt="2" /></a>
               </div>

               <figcaption></figcaption>
            </figure>

            <article>
               <img id="purificador" src="imagens/purificador.png" alt="Purificadores" title="Purificadores"  />
               <img id="fogao" src="imagens/fogao.png" alt="Fogão" title="Fogão Cooktop e Coifas"  />
               <img id="geladeira" src="imagens/geladeira.png" alt="Geladeira" title="Geladeiras"  />
               <img  id="maquina" src="imagens/maquina.png" alt="Maquinas" title="Maquinas Lava e Seca"  />
               <img  id="ar" src="imagens/ar.png" alt="Arcondicinados" title="Ar condicionados e Climatizadores"  />
            </article>
         </section>
         <footer>
            <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> 
            <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>
         </footer><!--footer final rodapé-->
      </main>
      <script src="js/js.js" type="text/javascript"></script>
   </body>
</html>

*{
   vertical-align: top; /* alinhamento vertical */
   box-sizing: border-box; /* não inclui padding e border na altura e largura total */
   outline: none; /* nenhuma linha de elemento em foco */
   text-decoration: none;
}
html, body{
   width: 100%; /* largura */
   height: 100%; /* altura */
   margin:0; /* margem */
}
body{
   font:12px Arial, Helvetica, sans-serif; /* tamanho e tipo de letra */
   background-color :#ccc; /* cor de fundo */
}
main{
   position:relative;
   max-width: 1024px;
   margin:0 auto;
   min-height:100%; /* altura mínima */
   height:auto; /* altura automática */
   padding-bottom:64px; /* espaçamento interno inferior (Altura do footer) */
}
/* === */
header#topo {
   background:url(../imagens/topo.png);	
   height:190px;
   position:relative;
   margin-bottom:36px;
}

header #logo {
   background:url(../imagens/logoc.png);
   top:50px;
   left:155px;
   width:541px;
   height:133px;
}
header nav {
   background:url(../imagens/menu.png);
   position:absolute;
   width:100%;
   bottom:0;
   background: #60365e;
}
header ul{
   list-style-type:none;
   margin:0;
   padding:0;
}
header li{
   display:inline-block;
   width: 19.5%;
   text-align:center;
}
header nav a{
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   display: block;
   font-size:20px;
   padding:10px;
   color:#FFF;
}
header nav 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;
}

section {
   background-image:url(../imagens/fundoof.png);
}

/*  SLIDER */
figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
   margin:0 auto;
   display:block;
   max-width: 970px;
   height: 310px;
   position: relative;
   margin-bottom:72px;
}

figcaption {
   border-top: 0.2px solid #000;
   border-radius: 0px 0px 6px 6px;
   color:#FFF;
   font-size: 22px;
   font-weight: lighter;
   text-align: center;
   background: #60365e;
   position: absolute;
   bottom: -35px;
   height: 35px;
   width:100%;
   padding:4px;
}
#slider {
   height: 339px;
   border: 1px solid #666;
   border-radius: 6px 6px 0px 0px;
   overflow: hidden;
   position:relative;
}
div#slider img{
   width: 970px;
}
#slider a{
   position:absolute;
   width: 850px;
   height: 290px;
   margin:auto;
   opacity: 0;
   filter: alpha(opacity=0);
}
#slider a, figure span{
   -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;
}
/*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;
}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*   ARTICLE */

article img{
   max-width : 176px;
   max-height: 130px;
   margin-left:46px;
}
article img:hover {
   opacity: 0.5;
   filter: alpha(opacity=30);
}

/*   RODAPÉ   */
main > footer {
   background: url(../imagens/rodape.png);
   position: absolute;
   width: 100%;
   height: 99px;
   bottom:0;
}

h1 a{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 19px;
   color: #FFF;
   text-decoration: none;
   text-shadow: 1px 1px black;
}

p a{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: #FFF;
   text-decoration: none;
   text-shadow: 1px 1px black;
}

.facebook{
   width:32px;
   right:32px;
   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;
   width: 159px;
}

.email {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: #FFF;
   text-decoration: none;
   text-shadow: 1px 1px black;
   margin-top: 20px;
}

use html5

estude css grids

Caio Wesley · Maio 27, 2017

Tentei usar esse que você me passou as coisas ficaram tudo desorganizada , mais vlw pela dica vou estudar sim !!!

lowys · Maio 27, 2017

Mostre-nos um screenshot de como ficou

aqui, no chrome, opera, edge e ff, mesmo diminuindo o zoom fica tudo na mesma formação

Editado Maio 27, 2017 por lowys

Caio Wesley · Maio 29, 2017

@lowys Eu postei ali no post uma print de como esta ficando , será que é só para mim que esta assim ? se poder me ajudar agradeço .vou postar a print aqui tambem

Marcos Renato · Maio 30, 2017

Você precisa usar grid, a posição das coisas está mudando porque você está usando valores fixos como por exemplo: width: 1200px; isso quer dizer que se a pessoa abrir o site no celular que tem uma média de 375px ele não vai nem ver o elemento.

Você precisa estudar sistema de grids como o do bootstrap(uma mão na roda pra isso), ou usar % ao invés de valores fixos.

Caio Wesley · Maio 30, 2017

ok muito obrigado vou deixar assim por enquanto mas vou fazer essa melhoria !!! Obrigado abraços .

Entrar

Zoom destrói pagina

Pergunta

Caio Wesley

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Caio Wesley

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Caio Wesley

Link para o comentário

Compartilhar em outros sites

Marcos Renato

Link para o comentário

Compartilhar em outros sites

Caio Wesley

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades