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