Entrar Ainda não tem acesso?
7
respostas

elementos nav não funcionam

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Navegação entre páginas e atividade Arrumando a lista

por Gabrieli Valentim
| 36.6k xp | 7 posts

O meu html está assim:


<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="produtos.css">
    </head>

    <body>
            <header>
                <h1><img src="logo.png" alt="logo Barbearia Alura"></h1>

                    <nav>
                        <ul>
                            <li><a href="index.html">home</a></li>
                            <li><a href= "produtos.html"></a>produtos</li>
                            <li><a href= "contato.html"></a>contato</li>
                        </ul>
                    </nav>
            </header>
    </body>

</html>

e o css assim: 

header { 
    background: #BBBBBB;
}

nav li {
    display: inline;
}

nav a {

    text-transform: uppercase;
    color: #00000;
    font-weight: bold;
    font-size: 22px: 
    text-decoration: none;
    margin: 0 0 0 15px;
}

no entanto, algumas coisas não estão funcionando. Primeiro que quando eu estava usando o VS ao invés do Sublime o código "text-decoration" não era reconhecido, no Sublime ele é, mas mesmo assim não está sendo aplicado. Além disso, só o "home" está em letra maiúscula, o texto está preto, mas nada mais está funcionando... O que eu fiz de errado?

7 respostas
por Breno Bosser Morim
| 891.3k xp | 102 posts
Estagiário em Desenvolvimento React

Olá! Tudo bem? O problema é que no estilo da nav a tem uma linha com dois pontos ao invés de ponto e vírgula no final. Na parte da lista, só a home está dentro da tag a, o resto está fora. Segue o código resolvido, nav: 

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href= "produtos.html">produtos</a></li>
        <li><a href= "contato.html">contato</a></li>
    </ul>
</nav>

E o estilo:

nav a {
            text-transform: uppercase;
            color: #000000;
            font-weight: bold;
            font-size: 22px;
            text-decoration: none;
            margin: 0 0 0 15px;
        }
por Alessandro Marques Pereira
| 21.5k xp | 19 posts

olá tentei refazer o código na minha index, porém não estou conseguindo deixar apenas dois links na index junto com o texto. poderiam me ajudar?

<head>
        <meta charset="UTF-8" >
        <title>Barbearia Alura</title><!--título da página-->
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <!--Fim do cabeçalho-->
    <!--Inicio do corpo da página-->
    <Body>
        <header>

                <nav>
                    <h1 class="titulo-principal">Barbearia Alura</h1>
                    <ul>

                        <li><a href="../html/produtos.html">Produtos</a></li>
                        <li><a href="../html/contato.html">Contatos</a></li>
                    </ul>
                </nav>
                <img id="banner" src="../img/banner.jpg">  

        </header>

no css

.titulo-principal{  
  display: relative;
  text-transform: uppercase;
  font-weight: bold;
}

nav a{
  display: relative;
  display:inline;
  text-transform: uppercase;
  font-weight: bolder;
}

no meu organizei em pastas e referenciei o caminho. o nav fica um abaixo do outro, me explica o que to fazendo de errado?

por Mateus
| 21.5k xp | 53 posts

Pra deixar um ao lado do outro é só colocar nav li e não nav a.

por Alessandro Marques Pereira
| 21.5k xp | 19 posts

OBRIGADO VOU TENTAR

por Alessandro Marques Pereira
| 21.5k xp | 19 posts

funcionou, porque segui o que o professor fez e nao funcionou?

por Alessandro Marques Pereira
| 21.5k xp | 19 posts

o nav engloba o ul lista nao ordenada li lista definida a uma âncora em tao por que quando defini para alinhar uma ancora não funcionou e sim a lista?

por Mateus
| 21.5k xp | 53 posts

Acho que é pq o A é um elemento muito "profundo" e o li esta mais "perto". Mas é só o meu palpite kkkkk.