[Dúvida] DESAFIO FINAL DO CURSO | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Igor Damiani Gatti

| 25.3k xp | 9 posts

Na minha pagina de home não estou conseguindo colocar meu menu de forma alinhada em horizontal esta ficando em vertical.

Segue o html:

<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">  
<title>Barbearia Alura</title> 
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.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="contatos.html">Contatos</a></li>
      </ul>
</nav>
</div>
  </header>
  <main>
  <img id="banner" src="banner.jpg">
  <div class="principal">
      <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

      <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

      <p id="missao"><em> missão é:<strong> "Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

      <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
  </div>

<div class="beneficios">    
    <h3 class="titulo-centralizado">Beneficios</h3>
    <ul>
      <li class="itens">Atendimento as clientes</li>
      <li class="itens">Espaço diferenciado</li>
      <li class="itens">Localização</li>
      <li class="itens">Profissonais qualificados</li>
    </ul>

    <img src="beneficios.jpg" class="imagembeneficios">
</div>
</main>
<footer>
  <img src="logo-branco.png">
  <p class="copyrigth">&copy; Copyright Barbearia Alura - 2019</p></p>
</footer>
</body>

</html>

____ segue o 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;
}

.principal {
    background: #CCCCCC;
    padding: 20px;
}

#banner {
    width: 100%;
    padding-top: 25px;
}

.titulo-centralizado{
    text-align: center;
}

p{
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: red;
}

.itens {
    font-style: italic;
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
    text-align: start;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;

}

.imagembeneficios {
    width: 50%;
}

footer {
    text-align: center;
    padding: 40px 0px;
    background: url("bg.jpg");
}

.copyrigth {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

2 respostas

solução!

por Andrieli Gonçalves

| 981.4k xp | 1973 posts

Alura Scuba Team Monitora Escola Semente | Fórum Ops

11/01/2023

Oi, Igor! Tudo certo por aí?

Isso está acontecendo, pois em nosso arquivo style.css estamos aplicando várias declarações a todas as tags ul do código. A lista não-ordenada está presente não somente no menu, mas também na apresentação dos benefícios da Barbearia Alura. Sendo assim, quando adicionamos display: inline-block à ul, todas listas passaram a ter seus itens na vertical, observe:

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

Como as configurações acima somente fazem referência à lista de benefícios, podemos tornar as declarações mais específicas limitando a abrangência do seu seletor. Antes de chamar a tag, podemos adicionar uma chamada referente ao seu elemento mãe, que é a div com a classe “beneficios”. Com isso, informamos que somente as tags ul dentro dessa div receberão o estilo. Veja abaixo como ficaria:

.beneficios ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

Desse modo, a configuração de inline-block não mais afetará os itens do nosso menu, os quais passarão a ficar na horizontal.

Por fim, para que todos os estilos que adicionamos sejam expressos na página, podemos alterar a ordem dos links das folhas de estilo em nosso arquivo HTML. Ao deixar reset.css antes de style.css, limpamos completamente o estilo pré-estabelecido pelo navegador e, assim, aplicamos os nossos próprios. A seguir, o código com a alteração:

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

Igor, espero ter ajudado! Caso surjam dúvidas após minha explicação ou ao longo dos seus estudos, fico à disposição.

Abraços!

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

por Igor Damiani Gatti

| 25.3k xp | 9 posts

11/01/2023

Show, consegui resvolver! Muito obrigado!