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

Link para o comentário

Compartilhar em outros sites

Marcelo Calazans

Link para o comentário

Compartilhar em outros sites

Joel Martins

Link para o comentário

Compartilhar em outros sites

Marcelo Calazans

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

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

Popular agora

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos