0

Duvida simples

Luciano Silva
Luciano Silva

Olá galerinha da DIO, tudo bem?

Estou dando meus primeiros passos sozinho, arriscando criar algo a parte e eu resolvi começar por uma "landing page" teste.

Ao criar uma div com 3 div filhas eu me deparei com algo que eu particularmente não consegui entender e mesmo encontrando uma solução preciso compreender melhor. Após criar todo o container e alinhar os itens eu decidi atribuir um titulo através de um H1 externo as div filhas, resolvi criar uma classe titulo onde ele só ajusta o tamanho da fonte e depois centraliza através de uma align-text, ai que encontrei o problema.

A div com a H1 não centraliza de forma alguma, tentei até reajustar as 3 div filhas pra ver se influenciava e nada, a única maneira que eu consegui fazer foi criando uma div que antecede a div mãe, atribui uma altura de 30px e centralizei o h1 com uma classe. Pra mim deve ter uma outra forma de fazer isso e conto com a ajuda de vocês que já possuem experiência com html e css.


O código html é esse:

<div class="formacao" id="form-acess">


        <div id="graduacao" class="ajuste-h">

            <div id="">

                <h1>Graduação</h1>

                <h2>Universidade Cruzeiro do Sul</h2>

                <h3>Análise e desenvolvimento de sistemas</h3>

                <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>

            </div>

        </div>


        <div id="formacao-tec" class="ajuste-h">

            <div id="">

                <h1>Curso técnico</h1>

                <h2>Universidade Paulista Unip</h2>

                <h3>Técnico em informática</h3>

                <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>

            </div>

        </div>

        <div id="complementar" class="ajuste-h">

            <div>

                <h1>Cursos complementares</h1>

                <h2>Senac - Construção de Websites</h2>

                <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>

            </div>

        </div>


Com alguns lembretes claro! E o meu Css dessa parte do código é o seguinte:


.formacao{

    displayflex;

    height500px;

    width100%;

    background-color#ffb3b3;

    flex-directionrow;

  }

id="form-acess" - Nao definido ainda pra ajustes pontuais


#graduacao{

    margin-top13em;

    margin-left:2.2em;

    font-size12px;

    border1px solid black;

    height200px;

    padding15px 15px;  


       

}



#formacao-tec{

    margin-top13em;

    margin-left11em;

    font-size12px;

    border1px solid black;

    height200px;

    padding15px 15px;

    

    

}


#complementar{

    margin-top13em;

    margin-left11em;

    font-size12px;

    border1px solid black;

    height200px;

    padding15px 15px;


}



Ah! Mais um detalhe, só consigo ajustar o titulo se não for uma display flex.



Desde já agradeço pela ajuda =)





0
0

Comentários (3)

0
J

Juniel Dantas

15/10/2021 00:57

Olá Luciano!


Pelo que entendi você precisa criar um titulo acima das div filhas e ambos, titulo e divs filhas estariam dentro de um container = div mae.


Veja se lhe atende:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@juniel_dantas</title>
  </head>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
    .formacao {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #ffb3b3;
      width: 100%;
      height: 400px;
    }


    #graduacao,
    #formacao-tec,
    #complementar {
      margin: 0 auto;
      font-size: 12px;
      border: 1px solid black;
      height: 200px;
      width: 200px;
    }


    .title {
      flex: none;
      display: block;
      position: absolute;
      align-self: flex-start;
      justify-self: start;
      background-color: aqua;
      width: 100%;
      text-align: center;
    }
  </style>


  <body>
    <div class="formacao">
      <h1 class="title">Titulo Seção</h1>
      <div id="graduacao">
        <h1>Graduação</h1>
        <h2>Universidade Cruzeiro do Sul</h2>
        <h3>Análise e desenvolvimento de sistemas</h3>
        <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>
      </div>


      <div id="formacao-tec">
        <h1>Curso técnico</h1>
        <h2>Universidade Paulista Unip</h2>
        <h3>Técnico em informática</h3>
        <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>
      </div>


      <div id="complementar">
        <h1>Cursos complementares</h1>
        <h2>Senac - Construção de Websites</h2>
        <p>INSERIR DESCRIÇAO RAPIDA SE ACHAR NECESSARIO</p>
      </div>
    </div>
  </body>
</html>


Caso as três div tenham as mesmas características, pode manter a estilização igual. Quando necessário ai pode criar uma classe extra para estilizar uma das div com outros detalhes.


Espero que ajude.

0
Luciano Silva

Luciano Silva

14/10/2021 23:04

Não foi qdo eu copiei, mas acabei de conferir se fechei e está fechada sim. Normalmente eu já abro e vou construindo dentro da div já criada e depois vou atribuindo as classes.

0
Alan Campos

Alan Campos

14/10/2021 22:33

Falta fechar a div container, no caso, a com a classe formacao

None

Brasil