HTML Ficheiro não carrega o ficheiro css de navbar

Joel Martins · 6 de agosto de 2021

Boas,

O programa não está a conseguir carregar o css da barra de navegação e os caminhos estão corretos.

index.php

<?php

require"../navegation_bar_/navegation_bar_.php";

?>
<html>
    <head>
        <title> Info-PandaStore </title>
        <link rel="stylesheet" href="sobre.css">
    </head>
    <body>
        <div id="geral">
            <h1>Como a marca e ideia do site surgiram?</h1>
            <p>Olá, eu chamo-me Joel Tavares Martins, tenho 15 anos e venho aqui apresentar a minha "nova" marca. Tudo começou quando tinha 12 anos e estava na aula de desenho. O professor pediu-nos para criar um logótipo para a nossa marca e foi aí que criei a marca "PandaStore".</p>
            <div class="img">
                <img src="../../img/1ºpandastore_paper_name_.jpg" alt="primeiro_rabisco_nome_" id="logo_sketch_">
                <img src="../../img/1ºpandastore_paper_panda_.jpg" alt="primeiro_rabisco_marca_" id="panda_sketch_">
            </div>
            <p>Depois de três anos, pensei em criar um site sobre o logotipo "PandaStore". e... EU CONSEGUI !!!</p>
            <h1>Como a minha "paixão" pela informática surgiu?</h1>     
            <p>       Como já referi em cima chamo-me Joel Tavares Martins, tenho 15 anos frequento atualmente a Escola Profissional de Oliveira do Hospital"-"EPTOLIVA" no "Curso de Gestão e Programação de Sistemas Informáticos"-"GPSI".</p>
            <p>       O meu gosto pela Informática começou quando eu tinha 12 anos e vi um panfleto para aulas de Robótica nesse preciso momento fui ter com a pessoa encarregada para lhe perguntar se podia entrar para as aulas de Robótica, disseram-me que podia e se tivesse mais algum colega que quisesse ir para o avisar. Eu fui falar com um ou dois amigos meus e eles também quiseram ir. As aulas eram uma vez por semana e nas aulas soldávamos e programávamos robôs. Os outros alunos tinham todos uns 17 ou 18 anos e eu e os meus amigos tinhamos 12 anos por isso ao inicio foi um bocado difícil de nos ambientarmos mas depois também nos começaram a ajudar e fomos-nos integrando cada vez mais até que chegou a altura de participar em um projeto chamado "RobôParty".</p>
              
                <img src="../../img/robo_party_.jpg" alt="RoboParty" id="roboparty">
              
            <p>       O mesmo durava cerca de 3 dias e tinha como objetivo criarmos um robo, programar-mos o mesmo para atravessar uma pista de um lado ao outro no minimo tempo possível, para fazer uma dança e quem fize-se o menor tempo possível e a melhor dança ganhava. A turma toda decidiu participar.</p>
            <p>       Pode-se dizer que esses três foram os dias mais divertidos de sempre, pois a possibilidade de convivermos com outro tipos de pessoas e de conseguirmos ter mais pontos de vista de uma determinada "coisa" é muito bom. A partir daí comecei a focar-me cada vez mais em Informática. Quando cheguei ao 10ºano decidi que iria optar por seguir um percurso profissional e após acabarem os 3 anos de curso se tivesse uma boa média iria seguir para a Universidade. Vou continuar a minha jornada e nunca desistir dos meus objetivos.</p>
        </div>
    </body>
</html>

navegation_bar_.php

<?php

require"../login/check_point_.php";
require"../connect.php";

?>
<head>
    <meta name="author" content="Joel Tavares Martins">
    <link rel="stylesheet" href="navegation_bar_.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="topnav" id="myTopnav">
      <a href="../página_inicial_/" class="active">Home</a>
      <a href="../sobre/">Sobre</a>
      <a href="../social_network_/">Redes Sociais</a>
      <div class="dropdown">
        <button class="dropbtn">Escola
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="../../../../../escola_project_/escola/ano1/">1º Ano</a>
          <a href="../../../../../escola_project_/escola/ano2/">2º Ano</a>
          <a href="../../../../../escola_project_/escola/ano3/">3º Ano</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn"><img class="pnd" src="../../img/buttons/panda.svg">
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="../../../../../escola_project_/escola/perfil">1º Ano</a>
          <a href="../../../../../escola_project_/escola/login"><img style="height:10px;width:10px;" src="../../img/buttons/logout.png"></a>
        </div>
      </div> 
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
    </script>
</body>
</html>

navegation_bar_.css

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

fica assim a página:

e deveria ficar assim:

Alguém me pode ajudar? Agradeço toda a ajuda possível

Gabriel Luiz da Cunha · 9 de agosto de 2021

@Joel Martins Tente usar este modelo de chamadas do Link

<link href='sobre.css' rel='stylesheet' type='text/css' />

Ou

<link href='nome_correto_do_diretorio/sobre.css' rel='stylesheet' type='text/css' />

Joel Martins · 9 de agosto de 2021

@Gabriel Luiz da Cunha não é sobre a página mas sim da barra de navegação.

Entrar

HTML Ficheiro não carrega o ficheiro css de navbar

Posts recomendados

Joel Martins

Gabriel Luiz da Cunha

Joel Martins

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos