×
Ir ao conteúdo
  • Cadastre-se

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


Ir à solução Resolvido por Marcelo Calazans,

Posts recomendados

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.

Link para o comentário
Compartilhar em outros sites

  • Solução

@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.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@Marcelo Calazans 

Funcionou.

Obrigado. :)

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como se tornar um desenvolvedor full-stack

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!