Jump to content

pheureunanda

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About pheureunanda

  1. pheureunanda

    Como alinhar elementos na página?

    Olá, eu sou iniciante em HTML e CSS, eu estou aprendendo por hobby para desenvolver temas para a rede social Tumblr, eu estou fazendo esse layout para fins de teste como fiz de rascunho no Photoshop: Só que ao codificá-lo, a área da barra lateral e a de postagem estão desreguladas e eu já tentei de todas as formas alinhá-las, mas não consigo, o que eu estou fazendo de errado? Aí os meus códigos e o link do Tumblr que eu estou desenvolvendo o layout. <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <!-- Título --> <title> {Title} </title> <!-- Ícone --> <link rel="shortcut icon" href="{Favicon}"> <!-- Descrição --> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <!-- Fonte Família --> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet"> <!-- CSS --> <style type="text/css"> /*Corpo da Página*/ body { background: url("https://i.imgur.com/ujnC90p.png") no-repeat fixed; font-family: 'Open Sans Condensed', sans-serif; font-size: 15px; text-align: justify; color: #7db1a5; } /*Caixa*/ #conteiner { display: flex; justify-content: center; } /*Conteúdo*/ .content { display: flex; justify-content: center; width: 810px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { width: 1000px; height: 1000px; background: url("https://i.imgur.com/gpaEEDj.png") no-repeat scroll; margin: 10px; } .entry { display: flex; flex-direction: row; } /*Barra Lateral*/ .sidebar { width: 131px; height: 121px; background: red; margin-top: 10px; margin-right: 10px; padding: 10px; } /*Faixa*/ .ribbon { margin-top: -10px; margin-left: -16px; } /*Postagem*/ .post { width: 400px; background: transparent; margin-top: 150px; margin-bottom: 10px; padding: 10px; } /*Título*/ .title { font-size: 20px; text-align: center; color: #f2d377; padding: 5px; } </style> </head> <body> <!-- Div de Caixa --> <div id="conteiner"> <!-- Div de Conteúdo --> <div class="content"> <!-- Div de Cabeçalho --> <div class="header"> <!-- Div de Logotipo --> <div class="logo"> <img src="https://i.imgur.com/J3ME7rw.png"> </div> <!-- Fim da Div de Logotipo --> </div> <!-- Fim da Div de Cabeçalho --> <!-- Div de Acesso --> <div class="entry"> <!-- Div de Barra Lateral --> <div class="sidebar"> <!-- Div de Faixa --> <div class="ribbon"></div> </div> <!-- Fim da Div de Barra Lateral --> <!-- Div de Postagem --> <div class="post"> <!-- Block de Postagem --> {block:Posts} <!-- Block de Texto --> {block:Text} <!-- Div de Título --> <div class="title"> {Title} </div> {Body} {/block:Text} {/block:Posts} </div> </div> <!-- Fim da Div de Acesso --> </div> <!-- Fim da Div de conteúdo --> </div> <!-- Fim da Div de Caixa --> </body> </html> O Tumblr: http://stripestheme.tumblr.com
  2. 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: 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.
×

Important Information

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