tinocosegundo 0 Denunciar post Postado Julho 24, 2015 Olá pessoal, estou apanhando faz dois dias com o posicionamento de meus elementos em um blog que estou desenvolvendo.O layout é bem simples, consta com um cabeçalho, um rodapé e o corpo do layout apresenta 2 colunas, no entanto não estou conseguindo posicionar as colunas entre o cabeçalho e o rodapé. Já tentei por float, position, mas nada consegue solucionar meu problema. Este código html: <header class="pag_tam"> <!-- Logotipo --> <h1 class="topo_logo"> <a href="index.php"><img src="imagens/logo.png" alt="Um Brasil melhor"></a> </h1> <h2 class="topo_dsc">Blog de ideias para um Brasil melhor!!</h2> </header> <!-- Conteúdo principal --> <section id="conteudo" class="pag_tam"> <div class="corpo">f</div> <div class="menu"> <nav class="menu_rs"> <ul> <li><a href="#"><img src="imagens/rs_fcbk_topo.png"></a></li> <li><a href="#"><img src="imagens/rs_twtt_topo.png"></a></li> <li><a href="#"><img src="imagens/rs_gl_topo.png"></a></li> <li><a href="#"><img src="imagens/rs_comp_topo.png"></a></li> </ul> </nav> </div> </section> <!-- Rodapé --> <footer class="pag_tam"> <div class="roda">Blog Um Brasil Melhor - Copyright © 2015</div> </footer> Este já é o css: body { /* Estrutura da página */ background-color: #7aa573; /* Margens */ margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; /* Fonte */ } /* Estilo do parágrafo */ p { } /* Tamanho da página */ .pag_tam { margin: 0 auto; width: 80%; position: relative; } /* Estilos do cabeçalho */ /* Logotipo */ .topo_logo { position: relative; top: 32px; left: 15px; text-align: left; float: left; } .topo_dsc { /* Posicionamento */ position: relative; top: 55px; right: 0px; /* Texto */ text-align: right; font-size: 18px; font-style: italic; font-family:Arial; font-weight:lighter; color: #283b25; } /* Estilos do corpo */ #conteudo { } .corpo { /* Tamanho */ width: 75%; /* Fundo */ background-color: #c2d4bf; /* Borda */ border-left-color: #283b25; border-left-style: solid; border-left-width: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: #283b25; /* Posicionamento */ position: relative; } /* Estilos do menu lateral */ /* Menu lateral */ .menu { /* Tamanho */ width: 25%; /* Fundo */ background-color: #aec3aa; /* Borda */ border-left-color: #283b25; border-left-style: solid; border-left-width: 1px; border-right-width: 1px; border-right-style: solid; border-right-color: #283b25; border-top-width: 1px; border-top-style: solid; border-top-color: #283b25; /* Posicionamento */ position: relative; /* Texto */ text-align: center; } /* Menu de redes sociais */ .menu_rs ul li { display: inline; } /* Estilo do Rodapé */ .roda { /* Posicionamento */ position: relative; /* Fundo */ padding-top: 15px; padding-bottom: 15px; /* Linha */ border-top-width: 1px; border-top-style: solid; border-top-color: #283b25; /* Texto */ text-align: center; color: #283b25; font-size: 16px; font-family:Arial; font-weight:lighter; } Esta é a primeira vez que tento programar um site sem tabelas. Obrigado Compartilhar este post Link para o post Compartilhar em outros sites
WictorP 9 Denunciar post Postado Julho 25, 2015 Talvez seu problema seja um clear:both... Coloque no final antes do fechamento de cada div pai uma div <div style="clear:both;"></div>, como por exemplo a div <div id="corpo">outras divs<div style='clear:both'></div></div> Compartilhar este post Link para o post Compartilhar em outros sites
tinocosegundo 0 Denunciar post Postado Julho 25, 2015 Isso ajudou, obrigado. Mas ainda não resolveu meu problema, consegui posicionar deste jeito agora: https://onedrive.live.com/redir?resid=27EE2BA9B3BC2A80!45136&authkey=!ALxQSfR_h2RNNgA&v=3&ithint=photo%2cpng Obrigado Compartilhar este post Link para o post Compartilhar em outros sites
Fábio BN 17 Denunciar post Postado Julho 28, 2015 Oi. Eu também usava muito tabelas, e agora comecei a trabalhar com DIVs e ando apanhando também. Esses dias tive que posicionar duas ( input type="text" ) uma do lado da outra com um texto entre elas centralizado no meio delas, e sem obter sucesso usando DIVs acabei as colocando dentro de uma tabela com 1 linha e 3 colunas, usando centralização central nas células, o resultado final ficou bom, coloquei a tabela em largura de 100% e ela ficou responsiva.Agora quanto ao seu caso. Veja de esse exemplos te ajuda. http://pt.stackoverflow.com/questions/38215/quando-usar-position-absolute-ou-relative-em-css No exemplo acima, aparece os códigos HTML e CSS dos exemplos, vale a pena conferir. Abraços! Compartilhar este post Link para o post Compartilhar em outros sites