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

Meu menu não centralizou

Gente, o meu menu não ficou centralizado, o que aconteceu? (estou fazendo apenas com cores e uma logo diferente)

header{
    background:#2d2766
    padding: 20px 0;
}

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

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

nav a{
    text-transform: uppercase;
    color: #61BDAC;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
nav{
    position: absolute;
    top:0;
    right: 0;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Oi Sthefanny, tudo bem?

Você envolveu o cabeçalho em uma div? Ele precisa estar assim:

<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">Contato</a></li>
                    </ul>
                </nav>
</div>

Você precisa fazer um ajuste na nav, mais precisamente no top, ele não pode ser 0. Deixando assim:

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

Se não der certo, preciso ver seu HTML também, tudo bem?

Outra dica que eu dou é: Verifica que no background:#2d2766 está faltando o; (ponto e vírgula), às vezes a falta de um faz com que ocorra erros no código.

Espero ter ajudado!

Bons estudos.

Abraço.

oii Lorena, obg pelas dicas. Mas olha... se eu coloco nav { position: absolute; top: 110px; right: 0; o meu menu some. Esse é meu Html `

    <header> 
        <div>
            <h1> <img id = "logo" src= "logo-branco.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"> Contato</a></li>
                    </ul>
                </nav>
        </div>
    </header>

    <main>
        <ul class="produtos">
        <li>
            <h2>Barba</h2>
            <img src="barba.jpg">
            <p class=" produto-descricao">Corte e desenho profissioal de barba</p> 
            <br>
            <p class="produto-preco"> R$ 18,00</p>
        </li>

        <li>
              <h2>Cabelo</h2>
            <img src="cabelo.jpg">
            <p class=" produto-descricao">Na tesoura ou na máquina, como o cliente preferir</p>
            <br><br>
            <pc class="produto-preco">R$ 25,00</p>
            </li>
        <li>
            <h2>Cabelo+Barba</h2>
            <img src="cabelo+barba.jpg">
            <p class=" produto-descricao"> <br>Pacote completo cabelo e barba</p><br>
            <p class="produto-preco">R$ 25,00</p>
        </li> 
        </ul>
    </main>
    <footer>
        <img src="logo-branco.png">
        <p> Desenvolvido por: Sthefanny Almeida</p>
        <p> 2022 </p>
    </footer>
`

meu Css atualmente está assim

header{
    background:#22333b;
    padding: 20px 0;
}

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

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

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

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

nav{
    position: absolute;
    top: 20%;
    right: 10%;
}

.produtos{
    width: 940px;
    margin: 0 auto;
    padding:50px 0;
}
.produtos li{
    display:inline-block;
    text-align:center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
   border:4px solid #000000;
   border-radius: 10px;
}
 .produtos li:hover{
    border-color:#22333b;

 }
.produtos li:hover h2{ 
   font-size:34px; 

}
 .produtos li:active{
    border-color:#ffe548;
 }

.produtos h2{
font-size: 30px;
font-weight: bold;
color:#22333b;
}
.produto-preco{
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;

}
.produto-descricao{
    font-size: 18px;
    color:#22333b;
}
footer {
    text-align: center;
    color: #f2f4f3;
    font-size: 13px;
    background:url("bg.jpg");
    padding:40px 0;
}
solução!

Oie.

O seu HTML está faltando a class caixa, na div, precisa arrumar assim:

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

                <nav>
                    <ul>
                        <li><a href="index.html">Início</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

Só assim o CSS abaixo vai ser aplicado na sua página:

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

Mais uma dica, você pode formatar seu código clicando com o botão direito do mouse, assim você pode arrumar os espaços que estão faltando, assim:

formatar projeto

Bons estudos.

Abraço.