Incluir *.js e *.css externo na página!

[GuillermeSt 0]

Bom dia pessoal! Estou querendo incluir um arquivo .css e um .js em minha página, mais sinto que estou errando alguma coisa na sequência dos diretórios :( Apesar do arquivo ser PHP o código está no HTML :)

 

Meu arquivo css e js, estão dois diretórios acima do local do arquivo que pretendo inserí-los:

www/iesp/paginas/01_recibo/form_01_recibo.php

 

Arquivos que quero inserir:

www/iesp/css/form_01_recibo.css

www/iesp/scripts/funcao_validar.js

 

Estou fazendo assim:

form_01_recibo.php

 

DENTRO DO HEAD:

 

<!-- SCRIPTS -->
<script type="text/javascript" src="../../scripts/funcao_validar.js"></script>
<!-- CSS --> 
<link rel="stylesheet" type="text/css" href="../../css/form_01_recibo.css" />

Vejam como estão os meus arquivos:

 

funcao_validar.js

 

<script language="javascript" type="text/javascript">

//cria a funcao validar()
function validar() { 
// cria uma var para cada campo do nosso formulário
// criamos a var nome e atribuimos o valor do campo nome, ou seja form1.nome.value (valor do campo nome do nosso formulário);
var nome = form1.nome.value;
// Se nome estiver em branco, as açoes serão executadas.
if (nome == "") {
alert('Preencha o campo com seu nome'); //Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome;
form1.nome.focus(); //Da foco no campo nome;
return false; //Retorna a resposta false, ou seja, que não deve continuar enviando os dados;
} //fim do if nome
} //fim da funcao validar()

</script>

form_01_recibo.css

/* ESTILO DA FONTE */
	@font-face {
	font-family: "segoeui1"; /* Como eu vou chamar a fonte a ser importada *-* */
	src: url(fontes/segoeuil.ttf);
	color:#ffffff;
	}

	@font-face {
	font-family: "segoeui2"; /* Como eu vou chamar a fonte a ser importada *-* */
	src: url(../fontes/segoeuisl.ttf);
	color:#ffffff;
	}

body {margin: 0; padding:0;   background: #EEE; font: 10px/13px; font-family: segoeui1, segoeui2, Lucida Sans, Arial, Verdana;}
.wrap {   overflow: hidden;   margin: 10px;}

/* CAIXA QUADRADA */
.box {   float:left; position:relative; width:20%; padding-bottom:20%;}
.boxInner {  position:absolute; left:10px; right:10px; top:10px; bottom:10px; overflow:hidden;}
.boxInner img {width: 100%;}
.boxInner .titleBox {position: absolute; bottom:0; left:0; right:0; margin-bottom:-50px; background:#000; background: rgba(0, 0, 0, 0.5); color:#FFF; padding:10px; text-align:center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {margin-bottom:0;}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {      width: 100%;      padding-bottom: 100%;   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {      width: 50%;      padding-bottom: 50%;   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {      width: 33.3%;      padding-bottom: 33.3%;   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {      width: 25%;      padding-bottom: 25%;   }
}

 

 

 

Creio que eu esteja errando na estrutura dos diretórios OU na estrutura do Javascript... alguém pode me dar uma luz? :devil:

[Worn 1]

<!-- SCRIPTS --> <script src="../scripts/funcao_validar.js" type="text/javascript" charset="utf-8"></script> <!-- CSS --> 

,<link rel="stylesheet" type="text/css" href="../css/form_01_recibo.css" />

 

tenta assim

[GuillermeSt 0]

Resolvido --em partes, resolveu somente o css-- !

O que fiz, foi alterar o campo no HEAD:

<!-- SCRIPTS --> <script type="text/javascript" src="../../scripts/funcao_validar.js"></script> 
<!-- CSS --> <link rel="stylesheet" type="text/css"href="../../css/form_01_recibo.css" />

por esse:

<!-- SCRIPTS -->
<script type='text/javascript' src="./paginas/01_recibo/funcao_validar.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./css/form_01_recibo.css" />

 

Descobri uma forma de fazer os testes quando tiver uma dúvida em relação aos diretórios:

1- Eu abro a minha página de testes no localhost;

2- Aperto CTRL+U para ver o código-fonte;

3- Identifico ONDE está a linha está o css e clico nele.. ele vai abrir o link.

Se abrir o CSS, é porque o diretório está correto! Foi assim que resolvi, mais percebo que o JAVASCRIPT ele não funciona! Mas se eu copiar o conteúdo dele e colar dentro do HEAD funciona normalmente...

 

<!-- SCRIPTS --> <script src="../scripts/funcao_validar.js" type="text/javascript" charset="utf-8"></script> <!-- CSS --> 

,<link rel="stylesheet" type="text/css" href="../css/form_01_recibo.css" />

 

tenta assim

 

O CSS como falei -exatamente na hora que vc postou, rs- já foi resolvido, somente o problema o .js que já vi que está no caminho correto mas não funciona... o que eu errei?

[Worn 1]

poderia posta o código todo aqui?

[GuillermeSt 0]

poderia posta o código todo aqui?

 

Claro!

 

form_01_recibo.php

<?php
/**
 * @author Guillerme St.
 * @copyright 2013
 * Esta página conterá o formulário do RECIBO. 
 */
?>
<! DOCTYPE HTML> 
<html lang="PT-BR"> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> ?????????????????????????? </title>

<!-- SCRIPTS -->
<script type='text/javascript' src="./paginas/01_recibo/funcao_validar.js"></script>
<!-- Enable media queries for old IE -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="./scripts/css3-mediaqueries.js"></script>
<![endif]-->

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./css/form_01_recibo.css" />


</head> 
<body class="no-touch"> 
<div class="wrap">
	<h1> Formulario de Recibo </h1>
	<form name="form1" action="paginas/01_recibo/form_01_recibo_inserindo.php" method="POST" >

<!-- Define all of the tiles: -->
  <div class="box">
    <div class="boxInner">
<label for="sexo_m"> <!-- pega o ID do button, e aumenta a capacidade do "clique" na tela. -->
      <input type="radio" name="sexo" value="m" id="sexo_m" checked="true"/>
      <img src="./imagens/form_01_recibo/masculino.png" />
      <div class="titleBox">Qual o sexo, masculino?</div>
</label>
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
<label for="sexo_f"> <!-- pega o ID do button, e aumenta a capacidade do "clique" na tela. -->
      <input type="radio" name="sexo" value="f" id="sexo_f" align="right"/>
      <img src="./imagens/form_01_recibo/feminino.png" />
      <div class="titleBox">...ou feminino?</div>
</label>
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
<label for="aluno"> <!-- pega o ID do button, e aumenta a capacidade do "clique" na tela. -->
     <input type="text" name="nome" id="aluno" style="width:100%; height:10%;">
     <img src="./imagens/form_01_recibo/aluno.png" />  
      <div class="titleBox">Qual o nome do aluno?</div>
</label>
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
<label for="envia"> <!-- pega o ID do button, e aumenta a capacidade do "clique" na tela. -->
      <input type="submit" onclick="return validar()" value="Enviar" id="envia" style="width:100%; height:10%;"/>
      <img src="./imagens/form_01_recibo/envia.png" />  
      <div class="titleBox">Submeta os dados!</div>
</label>
    </div>
  </div>

	</form>

  </div>

</body> 
</html>

 

 

funcao_validar.js

<script language="javascript" type="text/javascript">

//cria a funcao validar()
function validar() { 
// cria uma var para cada campo do nosso formulário
// criamos a var nome e atribuimos o valor do campo nome, ou seja form1.nome.value (valor do campo nome do nosso formulário);
var nome = form1.nome.value;
// Se nome estiver em branco, as açoes serão executadas.
if (nome == "") {
alert('Preencha o campo com seu nome'); //Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome;
form1.nome.focus(); //Da foco no campo nome;
return false; //Retorna a resposta false, ou seja, que não deve continuar enviando os dados;
} //fim do if nome
} //fim da funcao validar()

</script>

[William Bruno 1501]

aprenda a debugar teu js:

 

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[Guillerme Santos 0]

Vou dar uma olhada, mais creio que nao seja esse o problema, e sim quando eu vou importar! Pois se eu copiar o conteúdo do arquivo externo e colar dentro do corpo do PHP, o script funciona normalmente!