Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Links do <nav> não ficam alinhados lado a lado.

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por Pedro de Lima Navarro
| 13.3k xp | 3 posts

Pessoal, ao terminar o curso tentei incluir o novo header e footer na página feita na parte 1. Porém, mesmo o código sendo o mesmo os links do nav na nova página se organizam apenas um embaixo do outro e não consigo compreender porque.

Aqui vai o código:

HTML

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="utf-8">
        <title> Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>            
                    <ul>
                        <li class="linksnav"><a href="index.html">Home</a></li>
                        <li class="linksnav"><a href="produtos.html">Produtos</a></li>
                        <li class="linksnav"><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

CSS

header{
    background: #BBBBBB;
    padding: 20px 0; 
}

.caixa {
    position: relative; 
    width: 940px;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

.linksnav {
    display: inline;
    margin: 0 0 0 15px
}

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

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

Alguém consegue me dizer porque isso está acontecendo por favor?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
4 respostas
solução!
por Estudante
| 274.4k xp | 229 posts

Olá Pedro,

Faltou isso:

ul {
    width: auto;
    margin-right: 0;
}

ul li {
    display: inline-block; 
}
por Pedro de Lima Navarro
| 13.3k xp | 3 posts

Oi Marcos,

Muito obrigado!

Você saberia dizer porque ele funciona sem essas adições na outra página? (Desculpe pelos comentários no meio)

HTML

<!DOCTYPE html>
<html lang="pt-br"> <!--DEFINIR LINGUA-->

<html>
    <head>
        <meta charset="utf-8">
        <title> Produtos - Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" href="reset.css"> <!--Para limpar o estilo do navegador, vem antes de tudo-->
        <link rel="stylesheet" type="text/css" href="produtos.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>            
                    <ul>
                        <li> <a href="index.html">Home</a></li> <!--tag a é uma ancora com um link para outra pagina-->
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

CSS

header{
    background: #BBBBBB;
    padding: 20px 0; /*cima-baixo laterais; ladospara que os elementos do cabeçalho n cheguem na margem*/
}

.caixa {
    position: relative; /*necessario para o menu em posição absolute*/
    width: 940px; /*largura padrão*/
    margin: 0 auto; /*calcular margens*/
}

nav{
    position: absolute; /*tbm existem posições relativas e static (inicial padrão)*/
    top: 110px;
    right: 0;

}

nav li{
    display: inline;
    margin: 0 0 0 15px /*up right down left*/
}

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

nav a:hover { /*mouse por cima dos links (a) da navegação (nav)*/
    color: #C78C19;
    text-decoration: underline;
}
por Estudante
| 274.4k xp | 229 posts

Opa, disponha =)

No caso da página de produtos o arquivo CSS tem esse trecho:

nav li{
    display: inline;
    margin: 0 0 0 15px /*up right down left*/
}

O display: inline; faz com que o <li> do menu fique lado a lado.

por Pedro de Lima Navarro
| 13.3k xp | 3 posts

Nossa, que desatenção minha. Muito obrigado por me ajudar Marcos :D