8
respostas

Conteudo

Porque me conteúdo está ficando abaixo da navbar(header)? Deveria ficar abaixo, o que preciso fazer? e outra caso eu der zoom, também não queria que o conteúdo fosse para baixo do navbar(header).

<!DOCTYPE html lang = "PT-BR">
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Login</title>
        <link rel="stylesheet" href="reset.css">
        <!-- <link rel="stylesheet" href="login.css"> -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link rel="stylesheet" href="css/menu.css">
        <link rel="stylesheet" href="css/servicos.css">

    </head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-warning text-dark fixed-top">
        <a class="navbar-brand" href="menu.html"><img src="img/preta.png" alt="" class="banner"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" href="servicos.html">Serviços</a>
            <a class="nav-link" href="#">Prestadores</a>
            <a class="nav-link" href="#">Cálculos</a>
            <a class="nav-link" href="#">Indicadores</a>
            <a class="nav-link" href="#">Cadastro</a>
          </div>
        </div>
      </nav>
    <main>

        <h3 class="text-center">O que desejas?</h3>    

        <div class="container">
            <div class="row row-cols-6 .align-items-center justify-content-around">
              <div class="col">Criar servico</div>
              <div class="col">Verficar serviços</div>
              <div class="col">Column</div>
              <div class="col">Column</div>
              <div class="col">Column</div>
            </div>
        </div>
    </main>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
/* .container .div-container{
    margin: 12% auto 0; 
}
main{
    margin: 12% auto 0;
}

.container{
    padding: 0;
} */

.col{
    border: orangered solid 1px;
    border-radius: 15px;
    cursor: pointer;
    height: 10vw;
}
8 respostas

A questão não está muito clara, mas se eu entendi, inclui a Tag de título h3 dentro da DIV com classe Container. Dessa forma você poderá configurar o espaçamento da classe Container pelo CSS mais facilmente.

No CSS, também está comentada a classe Container, retire o comentário para aplicar e ajustar as margens já definidas.

Exemplo no HTML:

<main>
  <div class="container">
    <h3 class="text-center">O que desejas?</h3>
      <div class="row row-cols-6 .align-items-center justify-content-around">
      <div class="col">Criar servico</div>
      <div class="col">Verficar serviços</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</main>

Exemplo no CSS:

.container .div-container{
    margin: 12% auto 0; 
}
main{
    margin: 12% auto 0;
}

.container{
    padding: 0;
}

.col{
    border: orangered solid 1px;
    border-radius: 15px;
    cursor: pointer;
    height: 10vw;
}

Voces ensinam a como vincular com o correio? buscar os cep's direto do correio, puxando as informações certinho de lá...

Olá, Samuel!

Não sou instrutor da Alura (Mas quem sabe um dia eu possa oferecer meus conhecimentos sobre Direito e Ciências Contábeis para eles! Rs), mas sugiro que você faça os cursos de programação. Para esse propósito de implantação de rastreio de CEPs, acredito que os cursos de PHP e JavaScript poderão lhe ser muito úteis.

Espero ter ajudado.

Bem sincero, não ajudou em nada, o erro já começa sendo que a pessoa não é instrutor, segundo, curso de ciências contábeis? Mesmo com a resposta não me deu um norte, fiquei estacionado ainda...

Samuel, o fórum é um grupo aberto para discussões com toda a rede de alunos da Alura e não um meio de suporte direto com o professor. É tipo uma comunidade, entendeu?

Mas é isso, boa sorte.

Oi, Samuel!

Para que o seu conteúdo não fique abaixo do header, você pode adicionar uma margin-top dentro da classe .container, dessa forma:

.container{
    margin-top: 2rem;
}

Sobre um curso que trabalhe especificamente com CEP, não temos. Mas temos uma AluraMais em que Mauro Souto trata da questão: https://www.youtube.com/watch?v=_zU2lFmoI_I

Mas quando diminuir para tamanho de celular o conteúdo não vai ficar em baixo do nav novamente?

Oi, Samuel, tudo bem?

Para evitar esse comportamento você pode utilizar as medias queries para quando a tela diminuir, mas ao longo do curso, a instrutora irá apresentar como adaptar a tela a tamanhos diferentes.