HTML Problemas com a TAG Section no HTML5

GC GAMER · 8 de abril de 2020

Olá, estou fazendo um projeto para praticar programação.

Estou fazendo um layout de um site de filmes.

Estou me baseando nos codigos do professor do curso online de programação web que estou fazendo.

Estou usando HTML, CSS e BootStrap.

Ja criei a primeira parte do site, e agora quero fazer uma divisão com a TAG Section

Digitei o mesmo codigo do professor do curso, porém o meu não está dando certo

Já tentei de tudo mas não vai

segue o codigo do html com o bootstrap:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <title>CromoCine Filmes</title>
    <link rel="icon" href="Imagens/icone.png" >

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="estilo.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <nav class="navbar navbar-fixed-top navbar-inverse navbar-transparente">
     <div class="container">

      <!-- header -->
      <div class="navbar-header">
      <!-- botao toggle -->


      <button type="button" class="navbar-toggle collapsed"
      data-toggle="collapse" data-target="#barra-navegacao">
      <span class="sr-only">alternar navegação</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a href="index.html" class="navbar-brand">
     <span class="logo">CromoCine Filmes</span>
   </a>
  </div>


  <!-- navbar -->
  <div class="collapse navbar-collapse" id="barra-navegacao">
    <ul class="nav navbar-nav navbar-right">
     <li><a href="">Home</a></li>
     <li><a href="">Filmes</a></li>
     <li><a href="">Series</a></li>
     <li><a href="">Contato</a></li>
     <li><a href="">Sobre Nos</a></li>
   </ul>
 </div>
</div>
</nav>


   <div class="principal">
    <div class="texto-principal">
      <h1>O seu site de Filmes e Series</h1>
      <a href="" class="btn btn-custom btn-preto btn-lg">Assista Filmes</a>
      <a href="" class="btn btn-custom btn-branco btn-lg">Assista Series</a>
    </div>
  </div>


 
  <!-- Conteudos -->
  <section id="servicos">
    <div class="container">
      <div class="row">


      <!-- Filmes -->

      <div class="col-md-6">
      <div class="row filmes">

      <div class="col-md-6">
        <img src="Imagens/filme1.jpg" class="img-responsive">
      </div>

      <div class="col-md-6">
        <img src="Imagens/filme2.jpg" class="img-responsive">

      </div>
    </div> <!-- / row-->

    <div class="row filmes">
      <div class="col-md-6">
        <img src="Imagens/filme3.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <img src="Imagens/filme4.jpg" class="img-responsive">
      </div>
    </div> <!-- /row -->
  </div>

  <!--sobre-filmes -->

  <div class="col-md-6">
    <h2>O que o CromoCine tem?</h2>

    <h3>Filmes</h3>
    <p>O CromoCine tem milhares de filmes. Assista seus filmes e atores preferidos aqui.</p>

    <h3>Series</h3>
    <p>No CromoCine você tem acesso a centenas de series exclusivas. Assista já.</p>

    <h3>Novos Lançamentos</h3>
    <p>Assista filmes que ainda estão no cinema direto da sua casa.</p>
  </div>


  </section>


   
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

E também do CSS

html, body .capa {
    height: 100%;
}
nav {
    padding: 15px 0px;
}

body {
    background-image:  url(Imagens/fundo.jpg);
    display: table;
  width: 100%;
  height: 100vh;
  padding: 100px 0;
  color: white;
  background-position: 30% 45%;
  background-size: cover;
   background-attachment: fixed;
}

.principal {
text-align: center;
vertical-align:middle;
display:table-cell;
}

.texto-principal {
    text-align: center;
vertical-align:middle;
display:table-cell
    vertical-align: middle;

}

.btn-custom {
    color: white;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    padding: 10px 35px;
    margin: 0px 15px;
    text-transform: uppercase;
    transition: background 0.4s, color 0.4s;
}

.btn-preto {
    background: black;
}

.btn-preto:hover {
    color: grey;
}

.btn-branco {
    border: 2px solid white;
}

.btn-branco:hover {
    background-color:  white;
    color: black;
}


h1 {
    font-size: 100px;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #f5f5f5;
    font-weight: 900;
}

#servicos {
    background: white;
    padding-top: 20px;
    padding-bottom: 20px;
}

.filmes {
    padding:  10px 0px 10px 0px;

}

essa parte onde está os cartazes do filme deveriam estar em uma sessão individual e não acima do conteudo principal, alguém poderia me ajudar?

DiF · 8 de abril de 2020

@GC GAMER Na verdade você está usando errado o elemento section.

Use o elemento <div> para criar as divisões de estrutura. O section é usado para separas os setores dentro de um elemento div.

Pelo print, você tem um cabeçalho onde tem a frase "O seu site de filmes e series".

Abaixo seria os cartazes e não do lado.

Então a estrutura mais indicada é desta forma:

<header>
  <h1>O seu site de filme e séries</h1>
</header>
<div id="conteiner">
  <section class="cartaz">
    <img src="filme1.png" />   
  </section>
  <section class="cartaz">
    <img src="filme2.png" />   
  </section>
  <section class="cartaz">
    <img src="filme3.png" />   
  </section>
  <section class="cartaz">
    <img src="filme4.png" />   
  </section>

</div>

Como pode ver, o div age como elemento de estrutura de pacote. Dentro dele cada section é irmão adjacente e filhos de div.

Define que o elemento div#container é de nível de bloco. Em outras palavras, definir display block para ele. Desta forma, ele ficará abaixo do elemento header, que é outro que pode ser de nível de bloco.

É por aí.

GC GAMER · 8 de abril de 2020

@DiF Tentei fazer esse esquema que você me passou, porém não adiantou...

Esse codigo ta um tanto quanto difícil...

Quando fiz o que você me falou a unica diferença é que os elementos realmente ficaram abaixo do texto porém esse não era o meu objetivo, o objetivo era ter uma sessão separada no estilo da imagem abaixo (essa imagem é do curso de desenvolvimento web que estou fazendo na Udemy digitei o codigo do jeito do professor porém o meu fica em cima do conteudo em vez de ter uma sessão diferente)

DiF · 8 de abril de 2020

@GC GAMER Se é para ficar parecido com a imagem acima.

Aí muda-se a estrutura um pouco.

Vai criar um elemento de container. Dentro dele, cria-se mais dois que fiquem lado a lado. Em um deles, coloca as imagens de cartazes no outro o texto.

<header>
  <h1>O seu site de filme e séries</h1>
</header>
<div id="conteiner">
  <section class="box" id="filmes">
         <figure>
	       <img src="filme1.png" alt="Uma imagem impressionante">
         </figure>
         <figure>
	       <img src="filme2.png" alt="Uma imagem impressionante">
         </figure>
         <figure>
	       <img src="filme3.png" alt="Uma imagem impressionante">
         </figure>
         <figure>
	       <img src="filme4.png" alt="Uma imagem impressionante">
         </figure> 
  </section>
  <section class="box" id="texto">
    
  </section>
</div>