Entrar Ainda não tem acesso?
1
resposta

[Projeto] site barbearia alura

por GIULLIANO GHISELLI MARZOLA
| 24.6k xp | 6 posts

Estou tentando colocar na pagina index, o menu inline, porem o site não esta respondendo ao código, alguem conseguiria me ajudar ? HTML :

 <body>
        <header>
           <h1> Barbearia Alura </h1>
           <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="serviços.html">Serviços</a></li>
                    <li><a href="contatos.html">Contatos</a></li>
                    
                </ul>
            </nav> 
    
        </header>
        <img id="banner" src="ImagensBarbearia/banner.jpg" alt="Logo da Barbearia Alura" id="logo">

CSS:

nav {
    position: absolute;
    top: 50px;
    right: 100px;
}

nav li {
    display: inline;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

nav a :hover {
    color: #c47b38;
    text-decoration: underline;
}

ps, ele não responde nem ao nav li { display:inline;} nem ao nav a :hover

1 resposta
por Rafaela Petelin Silvério
| 786.8k xp | 1765 posts
Alura Scuba Team Monitora de Fórum

Olá Giulliano! Tudo bem?

Fiz o teste por aqui e o inline está sendo aplicado normalmente. Peço que verifique se fez o salvamento do arquivo com ctrl + S e caso ainda não veja mudanças, recarregue a página ou tente em outro navegador.

Já no hover realmente não estava sendo aplicado. Percebi que o seletor nav a :hover tem um espaço antes dos dois pontos, o que pode estar causando o problema. Corringindo a nav a:hover sem espaço:

nav a:hover {
    color: #c47b38;
    text-decoration: underline;
}

Seguindo esses passos o resultado foi o seguinte:

Página inicial da Barbearia Alura com título no topo esquerdo, imagem quebrada do logo abaixo e menu com links HOME, SERVIÇOS e CONTATOS alinhados à direita, com hover funcionando

Espero que essas dicas ajudem a resolver o problema! Conte com o apoio do fórum :)

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado