Entrar Ainda não tem acesso?
6
respostas

Menu diferente do exemplo

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Como funciona o posicionamento

por Patrick Thompson Reis
| 87k xp | 22 posts

Boa tarde.

Desculpem insistir no tópico, mas meu menu não fica como no modelo. Talvez seja algo simples, mas não achei o problema e meu menu fica exibido com os item empilhados e não em uma mesma linha.

Segue html e css

html

<header>
        <div class="box-navigation">
            <h1><img src="assets/img/logo.png" alt="logo da Barbearia Alura"></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>

CSS 

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

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

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

.box-navigation {
  position: relative;
  width: 940px;
  margin: 0 auto;
}
6 respostas
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Patrick, tudo bem?

Eu utilizei o trecho do seu código, mas o restante eu utilizei o do projeto base do curso e ficou correto o menu nav, segue um print do meu teste: https://imgur.com/a/8CDlllS

Veja se o seu código css e html não está faltando alguma tag ou propriedade que esteja ocasionando essa diferença. Ou caso prefira, coloque aqui o seu completo da pagina produtos.

por Patrick Thompson Reis
| 87k xp | 22 posts

Oi Laís, Obrigado pela resposta. Segue meu código abaixo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width">
  <title>Produtos - Barbearia Alura</title>
  <link rel="stylesheet" href="assets/css/reset.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <div class="box-navigation">
      <h1><img src="assets/img/logo.png" alt="logo da Barbearia Alura"></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 class="main-produtos">
    <ul class="produtos">
      <li>
        <h2>Cabelo</h2>
        <img src="assets/img/cabelo.jpg" alt="cabelo">
        <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir.</p>
        <p class="produto-preco">R$ 25,00</p>
      </li>
      <li>
        <h2>Barba</h2>
        <img src="assets/img/barba.jpg" alt="barba">
        <p class="produto-descricao">Corte e desenho profissional de barba.</p>
        <p class="produto-preco">R$ 18,00</p>
      </li>
      <li>
        <h2>Cabelo + Barba</h2>
        <img src="assets/img/cabelo+barba.jpg" alt="cabelobarba">
        <p class="produto-descricao">Pacote completo de cabelo e barba</p>
        <p class="produto-preco">R$ 35,00</p>
      </li>
    </ul>
  </main>

  <footer>
    <img src="assets/img/logo-branco.png" alt="logo-footer">
    <p class="copyright">&copy; Copyright thompsonreis 2020</p>
  </footer>
</body>

</html>
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Patrick, tudo bem?

Eu preciso exatamente do seu código css. Se puder colocar aqui, vou poder testar tudo e v~e como fica a sua página :}

por Patrick Thompson Reis
| 87k xp | 22 posts

Segue

body {
  font-family: 'Montserrat', sans-serif;
  background: #FeFeFe;
}

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

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;
}

nav a:hover {
  color: #ffffff;
}

.box-navigation {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

.banner {
  width: 100%;
}
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Patrick, tudo bem?

Eu testei com o seu HTML e o trecho do código do CSS, como você colocou só uma parte, a outra eu utilzei a do instrutor, segue um vídeo da sua página produtos centralizada:

https://imgur.com/a/Uj9nfEj

por Patrick Thompson Reis
| 87k xp | 22 posts

Pois é... não sei o que tá acontecendo então... Não mandei o css inteiro porque deu erro, acho que ficou muito grande

Mas obrigado assim mesmo.