Jump to content
pheureunanda

Como centralizar e alinhar áreas de sidebar e post

Recommended Posts

Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 1009335842_Layout1.png.0f6ca8bc907d195359abb48bffe6d184.png634773630_Layout2.png.3f1e260e0ec54e817bc83168a7b1c7d6.png766563761_Layout3.png.41c76cd00a31e7f2eed442be9373bb9b.png

Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 

 

E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 

 

Se alguém puder me ajudar... Estou recorrendo a esse fórum. 

Share this post


Link to post
Share on other sites

Unicamente você tem um bloco a esquerda e outro a direita.

Você pode alinhar eles com float por exemplo.

<style>
    .base:after,
    .base:before {content:""; display:table; clear:both}
    .base > .esquerda,
    .base > .direita {display: table-cell; float:left}
    .base > .esquerda,
    .base > .direita {padding:10px}
    
    .base {
        height:600px
    }
    .esquerda {
        width:200px;
        height:inherit
    }
    .direita {
        width:600px;
        height:inherit
    }
    .filho_esquerda {
        width:200px;
        height:140px;
        margin-bottom:10px;
        background:red;
    }
    .filho_direira {
        background:red;
        width:590px;
        height:590px
    }
</style>

<div class="base">
    <div class="esquerda">
        <div class="filho_esquerda">A</div>
        <div class="filho_esquerda">B</div>
        <div class="filho_esquerda">C</div>
        <div class="filho_esquerda">D</div>
    </div>
    <div class="direita">
        <div class="filho_direira"></div>
    </div>
</div>

Porém esse exemplo temos o bloco base que incorpora todos os outros á esquerda do se elemento pai no caso o body.

Para centralizar-lo temos que definir que ele possui uma largura, essa largura deve ser o suficiente para compor o tamanho de todos elementos internos para não causar um overflow. Tendo isso em mente bastar automatizar sua margem exemplo:

.base {
  height:600px;
  width:900px;
  margin:auto
}

 

Outra forma que podemos fazer é dizer que a base possui sua largura automatizada,

E que seus filhos vão cer centrais.

Assim sendo quando esses filhos possuem uma largura fixa ou relativa eles vão centralizar. Então para alinhar-los usamos o inline-block.

Exemplo só mudando o css da questão acima:

.base {
    width:auto;
    text-align:center
}
.esquerda, .direita {
    display:inline-block;
    vertical-align:top
}
.filho_esquerda {
    background:red;
    width:200px;
    height:140px;
    margin-bottom:10px;
}
.filho_direira {
    background:red;
    width:590px;
    height:590px
}

 

Quando se tem a noção que tudo que existe em tela são blocos sobrepondo outros blocos fica muito simples projetar e criar qualquer tipo de layout.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vcapelli
      Eu sei o que eu vou pedir é meio loucura mas espero que ao menos seja possível. É o seguinte: eu quero fixar um valor X e sempre depois das 18 horas esse valor atualizasse aumentando ou diminuindo de acordo com a bolsa de valores. Exemplo:
      Orçamento 100bi, hoje a bolsa fechou em queda de 2,73% então ela atualizaria para 97,27bi.
      Eu sei que é loucura mas se for possível realizar agradeceria imensamente, não precisam ter pressa também
    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digimons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="CSS/Style.css"> </head> <body class="container"><!-- INICIO DA NOTÍCIA --> <div> <center> <h1><a href=''>Noobmon - Portal de informações de digimons</a></h1> </center> <div class='place'> <center><h4>Gigadramon(ギガドラモン)</h4></center> <img src='IMG/IMG1.jpg' alt="Titulo da foto aqui"> <p> Gigadramon is an Android Digimon. It is a dark dragon Digimon that was developed at the same time as Megadramon. As a combat dragon that was armed to the teeth by further remodeling, its existence is the epitome of a fiendish computer virus. Its arms are equipped with the "Giga Hands". </p> <p> Gigadramon is a purple dragon with purple hair and yellow eyes. It has robotic wings and two arms, and wears a black helmet and black gauntlets on its arms. <a href='noticia.html'>Ler Mais.</a> </p> </div> </div><!-- FIM DA NOTÍCIA --> <div class='sidenote'><!-- INICIO DO MENU LATERAL --> <form class="form-inline my-2 my-lg-0"><!-- BOTÃO PESQUISA --> <input class="form-control mr-sm-2" type="search" placeholder="Digite Aqui" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button> </form><!-- FIM DO BOTÃO PESQUISA --> <hr> <ol> <li>Noticia 01</li> <li>Noticia 02</li> <li>Noticia 03</li> <li>Noticia 04</li> <li>Noticia 05</li> </ol> </div><!-- FINAL DO MENU LATERAL --> <div class="alert alert-dark tamanho"><!-- BOTÕES DAS NOTÍCIAS --> <center><form> <input type="button" value="Voltar" onClick="history.go(-1)"> <input type="button" value="Atualizar" onClick="history.go(0)"> <input type="button" value="Avançar" onCLick="history.forward()"> </form></center><!-- FIM DO BOTÃO DAS NOTÍCIAS --> </div> <div class='footer clear'><!-- FOOTER --> <p>Footer é aqui"</p> </div> </body> </html> CSS:
      body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .container { margin: 0 auto; } .place h4 { border-bottom: 1px dashed #7E9F19; margin: 0; } body { background: #FFF1D6 url(images/noise.png); font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .place { margin-right: 35%; background-color: #FFF; border: 1px solid #CCC; border-color: #CCC #999 #999 #CCC; margin-bottom: 20px; padding: 10px; } .tamanho { margin-right: 35%; margin-bottom: 20px; padding: 10px; } .place a { color: #2C88A7; font-weight: bold; } h1 a { color: #7E9F19; text-decoration: none; } /*h1 a:hover { background-color: #7E9F19; color: #FFF; }*/ .place img { border: 1px solid #7E9F19; float: left; margin: 10px 10px 0 0; padding: 2px; } .clear { clear: both; } .footer { font-size: 12px; text-align: center; } .sidenote h3 { font-size: 14px; margin-top: 0; } .sidenote ol { font-size: 12px; } .menulateral { float: right; width: 660px; } .sidenote { float: right; width: 30%; background-color: #FFFBE4; border: 1px solid #C9BC8F; padding: 10px; width: 345px; } #btn-noticia { float: right; padding-bottom: 0%; } #newn { padding-bottom: 2px; } Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.