Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tinocosegundo

Problema com posicionamento

Recommended Posts

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

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

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

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.