4
respostas

Navbar não fica com o estilo do vídeo

Olá, tudo bem? Tenho acompanhado o curso de PHP e MySQL I, porém o menu de navegação da minha página não ficou com o mesmo estilo que na vídeo-aula. Já tentei utilizar o bootstrap mais recente, já tentei utilizar o do curso (que baixei do arquivo .rar). Porém, a minha barra de navegação fica transparente e o link fica azul normal, o que não condiz com o fundo preto e link cinza do vídeo.

Tenho me baseado no curso para criar o meu próprio controle de compras pessoal. O código do cabecalho.php é:

<html>

    <head>
        <title>Compras</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="compras.css">
    </head>

    <body>

        <!-- Menu de navegação: no Bootstrap é a classe navbar -->
        <div class="navbar navbar-inverse navbar-fixed-top"> <!-- Barra de navegação inversa e fixada no topo -->
            <div class="container">
                <!-- Nome da loja -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.php">Home</a>
                </div>
            </div>

        </div>

        <div class="container">
            <div class="conteudo-principal">

O meu css compras.css é:

body {
    margin: 50px;
}

.conteudo-principal {
    padding: 40px 15px;
    text-align: center;
}

.caixa-adicao {
    border: 2px solid #C2CCCA;
    margin: 7px;
}

body {
    background-color: aliceblue;
}

body h1 {
    margin-bottom: 40px;
}

input {
    margin-bottom: 10px;
}

A imagem de como a minha página fica: https://ibb.co/gvnmuz

Tentei deletar os arquivos css para ver se o html estava referenciando corretamente estes e, estranhamente, deletar os arquivos não mudou em nada a aparência das minhas páginas.

Link para o projeto: https://github.com/pietroz123/PHP_e_MySQL_I-controle_compras

Vocês poderiam me ajudar?

4 respostas

Oi Pietro, tudo bom?

Seu arquivo compras.css está dentro ou fora da pasta css?

Verifica se no console do seu navegador, o arquivo está sendo importado corretamente?

Abraço

Oi André,

Estava fora da pasta css, coloquei para dentro (é o correto né?). Continua não funcionando a navbar.

Todos os css aparentam estarem sendo carregados: https://ibb.co/cGjKge

Meu diretório está organizado desta maneira: https://ibb.co/i0jfnK

Oi Pietro, tudo bom?

A versão do bootstrap tem bastante impacto na verdade. A do curso é 3.3.7 e a partir da versão 4 do bootstrap mudou bastante coisa na estrutura das classes e css`s do framework.

Além disso, acredito que outro arquivo que esteja impactando é o reset.css. Tem bastante regra de css genérica lá que podem sobrescrever os comportamentos padrão dos navegadores.

Acredito que removendo o reset, mantendo a versão do bootstrap na 3.3 e dando uma conferida no css do seu arquivo compras.css para seguir os espaçamentos certos deva dar um impacto bom =)

Qualquer problema é só falar.

Abraço

Oi André, tudo bem e você?

Então, eu fiz testes com e sem o reset.css, e com a versão 3.3.7 e 4 do Bootstrap. Fiz testes também com o compras.css dentro e fora da pasta css. Nenhum desses testes resolveu este problema em que o estilo da NavBar não ficava igual ao do vídeo. Porém, uma coisa que acabei de testar e "resolveu" o problema foi testar o controle de compras (localhost/compras) em outros navegadores. Estava utilizando o Google Chrome e não estava funcionando (estava mostrando a navbar conforme a imagem que mandei no início do tópico). Testei no Internet Explorer e no Google Chrome Beta e magicamente o estilo da navbar começou a funcionar. Existe alguma restrição no Google Chrome quanto ao Bootstrap? Não deveria né? Mas de qualquer modo está funcionando agora, menos no Google Chrome.