Caio Wesley

Maio 30, 2017

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

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

Maio 27, 2017

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

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

Maio 25, 2017

Resolvido !!!!! Obrigado pelo espaço

#slider a {
   position:absolute;
   width: 970px;
height: 342px;
   margin:auto;
   left: 60px;
   top: 2px;
   opacity: 0;
   filter: alpha(opacity=0);
}

Maio 25, 2017

Estou com um problema estou tentando fazer um efeito slide com java , só que esta acontecendo um problema, as imagens que escolhi estão ficando fora do lugar como podem ver a baixo , vou postar os codigos aqui quem poder me ajudar agradeço , Abraços !!

Css e HTML abaixo :

@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:relative;
	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;
}
	
	

* {margin: 0; padding: 0;}
body {background: #000}
a,img {border: none;}
.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: 342px;
	margin:auto;
	z-index: 0;
	left: -22px;
	top: 1px;
	border: 1px solid #666;
}
#slider a {
	position:relative;
	top: 0px;
	left: 10px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {
	background: #999;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	bottom: 134px;
	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: #fff;
    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 {
	color: #000;
	font-family: "Kaushan Script","Lato","arial";
	font-size: 22px;
	text-align: center;
	background: #CCC;
	width: 970px;
	position: absolute;
	margin: auto;
	bottom: -34px;
	left: -21px;
	line-height: 55px;
	height: 45px;
	
}

<!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" />
<style type="text/css">
body {
	background-image: url(../PLANILHAS%20CAIO/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);
</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="#">Página Inicial   </a></li> 
        			<li><a href="#">Quem Somos</a></li>
        			<li><a href="#">Áreas de Cobertura</a></li> 
        			<li><a href="#">Serviços</a></li>
        			<li><a href="#">Fale Conosco</a></li>
    			</ul>
</nav>
</div>

        	
<div id ="fundoinicial">

<figure>
   <span class="trs next"></span>
   <span class="trs prev"></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>
   </div>

   <figcaption></figcaption>
</figure>


<div class="rodape"></div>
</div><!--div final menufundo--> 
	       

                            
</body>
</html>

Maio 22, 2017

Muito Obrigado pelas dicas esta me ajudando muito , mas eu add os codigos color e text-decoration , mesmo assim não sai o sublinhado e a cor não muda.

Maio 22, 2017

Sou novo na área , estou aprendendo agora , gostaria de uma ajuda , estou tentando fazer um menu estou seguindo alguns tutoriais no youtube , fiz um menu só que não consigo mudar a cor da fonte nem tirar o sublinhado , se alguém poder me ajudar agradeço muito !!

<!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>Untitled Document</title>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(../PLANILHAS%20CAIO/projeto/imagens/fundo.jpg);
}
</style>
</head>


<body>


			<div id="logo">
					</div>			<!--div final do logo-->
			<div id="topo"></div>			<!--div final topo-->   
            <div id="menufundo"><nav id="menu">
       		<ul>
        		<li><a href="#">Pagina Inicial</a></li> 
        		<li><a href="#">Produtos</a></li>
        		<li><a href="#">Missão</a></li>
        		<li><a href="#">Links</a></li>
        		<li><a href="#">Contato</a></li>
    		</ul>
       </nav>                
</div>                
			<div id ="fundoinicial">
</div>			<!--div final fundoinicial-->
                    
                    
          
                  	
                        
              			
                   
                        
</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:relative;
	top:50px;
	left:230px;
	width:541px;
	height:133px;
}
	
#fundoinicial {
	background-image:url(../imagens/fundoof.png);
	width:1024px;
	height:1080px;
	margin:auto;
	
}

#menufundo {
	background:url(../imagens/menu.png);
	position:relative;
	width:1024px;
	height:30px;
	margin:auto;
}


#menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:26px;
	line-height:30px;
	display:inline;
    padding:30px;
    margin:20px;
	color:#FFF;
	
}

Maio 17, 2017

Olá bom dia , sou novo no fórum estou com um projeto para criar um site estou aprendendo tudo , tenho pouco conhecimento ai vim ate aqui para conseguir umas dicas e ajudas !!!

Fiz um layout no FireWorks , gostaria de saber como posso fatiar ele e montar ele no Dreamweaver , tenho pouco conhecimento quem poder me ajudar agradeço !!!

A ideia é montar um site para uma assistência em que trabalho .

vou colocar em anexo o layout quem poder me dar umas dicas tambem ficarei grato , muito obrigado . !!!!

Entrar

Caio Wesley

Total de itens

Registro em

Última visita

Tipo de Conteúdo

Perfis

Fóruns

Posts postados por Caio Wesley

Zoom destrói pagina

Zoom destrói pagina

Zoom destrói pagina

Zoom destrói pagina

Slide desordenado

Slide desordenado

Color Font

Color Font

Como Fatiar layout

Navegação

Atividades