HTML Formatação da "Barra de Navegação"

Joel Martins · 28 de julho de 2021

Boas,

Eu criei uma pasta com a barra de navegação para utilizar em todas as páginas com require mas ao colocar

<?php require"../Navigation_Bar_/navegation_bar_.php"; ?>

a barra fica sem formatação.

O meu código está aqui:

<?php

require"../connect.php";
require"../Navigation_Bar_/navegation_bar_.html";

$result = mysqli_query($conn,"SELECT * FROM 1º_assessment_");
echo"<html>
  <link rel='stylesheet' media='screen and (max-width: 600px)' href='mobile.css'>
    <title>Escola</title>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
            <meta name='author' content='Joel Tavares Martins'>
                <meta http-equiv='refresh' content='43200'>    
                    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
                    <link rel='stylesheet' href='css.css'>
        </head>
            <br>
            <br>
            <br>
            <!--<img src='/imagens/under.png' alt='under_construction_' id='under'>-->
           <p id='f'>Aqui você pode encontrar todas as minhas <b>avaliações modulares</b> do 1ºAno<b>.</b></p>
</body>
    </html>";
    ?>

e aqui está o hmtl da barra.

        <link rel='stylesheet' href='navegation_bar_.css'>
            <div class='topnav' id='myTopnav'>
                <a href='../../' class='active'>Home</a>
                <a href='../sobre.html'>Sobre</a>
                <a href='../redessociais.html'>Redes Sociais</a>
                <div class='dropdown'>
                    <button class='dropbtn'>Escola 
                        <i class='fa fa-caret-down'></i>
                    </button>
                    <div class='dropdown-content'>
                        <a href='ano1.php'>1º Ano</a>
                        <a href='../ano2/ano2.php'>2º Ano</a>
                        <a href='../ano3/ano3.php'>3º Ano</a>
                    </div>
                </div> 
                <a href='javascript:void(0);' style='font-size:15px;' class='icon' onclick='myFunction()'>&#9776;</a>
            </div>
            <div style='padding-left:16px'>
            </div>
            <script>
                function myFunction() {
                  var x = document.getElementById('myTopnav');
                  if (x.className === 'topnav') {
                    x.className += ' responsive';
                  } else {
                    x.className = 'topnav';
                  }
                }
            </script>

CSS da barra

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 .dropbt
    {
        display: block;
        width: 100%;
        text-align: left;
    }
}

Agradeço toda a ajuda possível.

Marcelo Calazans · 28 de julho de 2021

@Joel Martins

Olá colega.

Testando apenas a sua "navegation bar" aqui, no código abaixo ela funciona, pelo menos ela aparece com a formatação:

<html>


<style>
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 .dropbt
    {
        display: block;
        width: 100%;
        text-align: left;
    }
}
</style>

<body>

            <div class='topnav' id='myTopnav'>
                <a href='../../' class='active'>Home</a>
                <a href='../sobre.html'>Sobre</a>
                <a href='../redessociais.html'>Redes Sociais</a>
                <div class='dropdown'>
                    <button class='dropbtn'>Escola 
                        <i class='fa fa-caret-down'></i>
                    </button>
                    <div class='dropdown-content'>
                        <a href='ano1.php'>1º Ano</a>
                        <a href='../ano2/ano2.php'>2º Ano</a>
                        <a href='../ano3/ano3.php'>3º Ano</a>
                    </div>
                </div> 
                <a href='javascript:void(0);' style='font-size:15px;' class='icon' onclick='myFunction()'>&#9776;</a>
            </div>
            <div style='padding-left:16px'>
            </div>
            <script>
                function myFunction() {
                  var x = document.getElementById('myTopnav');
                  if (x.className === 'topnav') {
                    x.className += ' responsive';
                  } else {
                    x.className = 'topnav';
                  }
                }
            </script>
            
</body>            


</html>

Vejo portanto, que o problema deve estar nas suas chamadas:

<?php require"../Navigation_Bar_/navegation_bar_.php"; ?>

<link rel='stylesheet' href='navegation_bar_.css'>

require"../Navigation_Bar_/navegation_bar_.html";

Veja se os caminhos estão corretos e tente estruturar melhor isso.

Sugestão para testar:

Deixe o CSS junto com o arquivo para testar, como está no meu codigo acima, e faça apenas uma chamada para esse código usando:

<?php include_once("arquivo da barra com o caminho CORRETO");?>

Veja se funciona.

Abraços e espero ter ajudado.

Joel Martins · 28 de julho de 2021

@Marcelo Calazans

Funcionou.

Obrigado.

Marcelo Calazans · 28 de julho de 2021

7 minutos atrás, Joel Martins disse:

@Marcelo Calazans

Funcionou.

Obrigado.

Fico feliz que tenha funcionado.

Abraços amigo.

Entrar

HTML Formatação da "Barra de Navegação"

Posts recomendados

Joel Martins

Marcelo Calazans

Joel Martins

Marcelo Calazans

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