Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

o inline-block não fica posicionado corretamente,as alteraçoes nao funcionam

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>produtos - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" 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>
                       <li><a href="produtos.html">Produtos</a></li>
                       <li><a href="contato.html">Contatos</a></li>    



                    </ul>
                </nav>
            </div>
        </header>
       <main>
            <ul class="produtos">
             <li>
                <h2>cabelo</h2>
                <img src="cabelo.jpg">
                <p>Na tesoura ou maquina,como o cliente preferir</p>
                <p>R$ 25,00</p>
             </li>
             <li>
                <h2>barba</h2>
                <img src="barba.jpg">
                <p>Corte e desenho profissional de barba</p>
                <p>R$ 18,00</p>
             </li>
             <li>
                <h2>cabelo+barba</h2>
                <img src="cabelo+barba.jpg">
                <p>Pacote completo de cabelo e barba</p>
                <p>R$ 35,OO</p>
             </li> 
         </ul>       
        </main>
    </body>
</html>        

CSS.
```header {
    background: #BBBBBB;
    padding: 20px 0;
}
.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {

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

nav li {
     display: inline;
     margin: 0 0 0 15px;
}

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

.produtos {
    width: 940px
    margin:0 auto;
}

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30px
    vertical-align: top;
# }
o inline-block funciona as modificações não 

`

4 respostas

Oi Matheus, tudo bem?

Dando uma olhadinha no css, pude ver que falta alguns ; no final, como em:

produtos {
    width: 940px
    margin:0 auto;
}

Deveria ficar assim:

.produtos {
    width: 940px;
    margin: 0 auto;
}

Tirar o *# * que aparece ali no final do código css também. Verifica se no resto do seu código está tudo identado certinho para que não haja esses conflitos, a gente sempre acaba deixando passar algo despercebido, é bem normal ;)

Bons estudos.

solução!

Olá, Matheus, tudo bem? Dá uma olhada no meu post no fórum, talvez ele possa ajudar você: https://cursos.alura.com.br/forum/topico-resolucao-problema-com-o-alinhamento-da-nav-inserindo-cabecalho-e-o-rodape-216682

muito obrigado as duas funcionou perfeitamente agora !!!

Show Matheus, Esses códigos quebram nossas cabeças mesmo