Pesquisar na Comunidade
Mostrando resultados para as tags ''css html boostrap''.
Encontrado 1 registro
-
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 !!!!
