pheureunanda
-
Total de itens
3 -
Registro em
-
Última visita
Tudo que pheureunanda postou
-
Olá, estou aprendendo a como usar o layout grid e estou com uma dúvida, como eu faço para definir um espaçamento entre a parte do cabeçalho, a barra lateral e a área de postagem? É que eu usei o grid gap e defini o espaçamento, só que o cabeçalho estava junto ao conteiner sem margem, aí eu defini uma margem do topo para separar o cabeçalho do conteiner, mas ao fazer isso ele ficou sem espaçamento entre a parte da barra lateral e a área de postagem, como eu faço para arrumar isso? Aí como está o layout no momento e os meus códigos: Eu estou fazendo o layout para desenvolver um tema para a rede social Tumblr, ele está como na imagem, aqui o link do Tumblr que eu estou usando para aplicar o layout: https://stripestheme.tumblr.com/ Os meus códigos: /*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: grid; grid-template-columns: 140px 400px; grid-template-rows: 40px; grid-template-areas:"h h" "p s"; grid-gap: 10px; justify-content: center; width: 570px; height: 610px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { grid-area: h; width: 500px; height: 50px; background: #7db1a5; margin-top: 10px; margin-bottom: 10px; } /*Sidebar*/ .sidebar { grid-area: s; background: #7db1a5; margin-bottom: 10px; } /*Postagem*/ .post { grid-area: p; background: #7db1a5; margin-bottom: 10px; } <div id="conteiner"> <div class="content"> <div class="header"></div> <div class="sidebar"></div> <div class="post"></div> </div> Olá, estou aprendendo a como usar o layout grid e estou com uma dúvida, como eu faço para definir um espaçamento entre a parte do cabeçalho, a barra lateral e a área de postagem? É que eu usei o grid gap e defini o espaçamento, só que o cabeçalho estava junto ao conteiner sem margem, aí eu defini uma margem do topo para separar o cabeçalho do conteiner, mas ao fazer isso ele ficou sem espaçamento entre a parte da barra lateral e a área de postagem, como eu faço para arrumar isso? Aí como está o layout no momento e os meus códigos: Eu estou fazendo o layout para desenvolver um tema para a rede social Tumblr, ele está como na imagem, aqui o link do Tumblr que eu estou usando para aplicar o layout: https://stripestheme.tumblr.com/ Os meus códigos: /*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: grid; grid-template-columns: 140px 400px; grid-template-rows: 40px; grid-template-areas:"h h" "p s"; grid-gap: 10px; justify-content: center; width: 570px; height: 610px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { grid-area: h; width: 500px; height: 50px; background: #7db1a5; margin-top: 10px; margin-bottom: 10px; } /*Sidebar*/ .sidebar { grid-area: s; background: #7db1a5; margin-bottom: 10px; } /*Postagem*/ .post { grid-area: p; background: #7db1a5; margin-bottom: 10px; } <div id="conteiner"> <div class="content"> <div class="header"></div> <div class="sidebar"></div> <div class="post"></div> </div> </div> Executar Expandir trecho de código Se alguém puder me ajudar...
-
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
-
Como centralizar e alinhar áreas de sidebar e post
pheureunanda postou um tópico no fórum Desenvolvimento frontend
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.