Ir para conteúdo

POWERED BY:

Arquivado

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

gRoOvE

Disposição

Por , em Desenvolvimento frontend

Recommended Posts

gRoOvE    0

gRoOvE
Postado

ae galera das WS, estou com o seguinte problema, tenho um layout alinhado da seguinte forma:

Cabeçalho, 3 colunas, Rodapé. Segue abaixo o código das CSS que está disposto da seguinte forma no HTML:

 

<div id="geral">
	<div id="cabecalho">CABECALHO</div>
	<div id="meio"></div>
	<div id="esquerda"></div>
	<div id="direita"></div>
	<div id="rodape"></div>
</div>

#geral {
	width:900px;
	margin:0 auto;
	background-color: #808080;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;

}
#cabecalho {
	background-color: #660099;
	height: 70px;
	clear:both;
}
#rodape {
	background-color: #333333;
	clear:both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 20px;
	border: thin solid #595959;
	
}
#direita, #esquerda {
	width:175px;
	font:10px verdana;
	background-color: #808080;
	
}
#esquerda {float:left;}
#direita {float:right;}


#meio {
	border:1px solid #CCCCCC;
	background-color: #000000;
	margin-top: 0;
	margin-right: 190px;
	margin-bottom: 0;
	margin-left: 190px;
	position:absolute;
	width: 520px;
}

Até ai tudo bem, ocorre que estou trabalhando com PHP e por motivos de sintaxe, a div id = "meio" tem que vir antes das "esquerda" e "direita", dessa forma que postei ai está funcionando soh que o corpo do site que está contido na div "meio" está passando por cima do rodapé.

Não manjo nada de CSS, então espero que consigam me ajudar pois dependo disso pra prosseguir com a programação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

groove, Boa Tarde!

 

Então não sei se entendi sua dúvida, porém:

 

Tenta retirar a propriedade position e o valor absolute da sua div meio.

 

Qualquer coisa, tenta ser mais claro na sua dúvida. Que pode facilitar para o pessoal te ajudar.

 

até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gRoOvE    0

gRoOvE
Postado

pois velho ficou complicado msm, oq acontece se eu tirar o absolute as colunas da direita e da esqurda nao acompanham a do meio, ai fica um espaco dos lado.

Resumindo, o que eu preciso fazer é alinhar as 3 colunas: equerda, meio e direita; uma do lado da outra. Só que no html o div id="meio" tem q ir primeiro por causa da sintaxe do php da uns erro.

Vo colocar um print aqui se nao vai ser impossivel de intender asdhiashsad.

Sem absolute:

Imagem Postada

Com absolute:

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoTauille.com    0

RobertoTauille.com
Postado

Acredito que o problema seja esse:

 

<div id="geral">
	<div id="cabecalho">CABECALHO</div>
	<div id="meio"></div>
	<div id="esquerda"></div>
	<div id="direita"></div>
	<div id="rodape"></div>
</div>

Coloque primeiro a div da esquerda, depois a do meio e assim por diante.

 

Se da erro cara, aconselho programar tudo de novo, utilizando a nova estrutura.

 

Não tem crise qndo esta tudo organizado.

 

abraços! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

gRoOvE    0

gRoOvE
Postado

se eu coloco da forma que você falou a disposicao fica certinha, soh q dai da problema no php...o css tem q ficar assim mesmo, na ordem ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

humm, isso é problema com posicionamento das divs mesmo no html, troca de lugar que funciona, tive esse problema várias vezes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom meu caro groove, analisando seu código encontrei alguns errinhos básicos e também a ausência de um elemento fundamental para que isso que você quer funcione: o float: left na div meio... Bom, como vi que você não usa toda a extensão da div geral, que tem uma largura de 900px, coloquei um margin-right na div esquerda para centralizar a div meio... Enfim, chega de blá blá blá e veja o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>TÍtulo do Site</title>
	<style type="text/css">
	div#geral {
		width: 900px;
		margin: 0 auto;
		font: 10px Verdana, Arial, Helvetica, sans-serif;
		font-weight: normal;
		color: #fff;
		background-color: #808080;
	}
	div#cabecalho {
		width: 900px;
		height: 70px;
		background-color: #609;
	}
	div#direita, div#esquerda {
		width: 175px;
		font: 10px Verdana, Arial, Helvetica, sans-serif;
	}
	div#esquerda {
		float: left;
		margin-right: 14px;
	}
	div#direita {
		float: right;
		margin-left: 14px;
	}
	div#meio {
		float: left;
		width: 520px;
		border: 1px solid #ccc;
		background-color: #000;
	}
	div#rodape {
		width: 896px;
		clear: both;
		font: 10px Verdana, Arial, Helvetica, sans-serif;
		font-weight: bold;
		color: #fff;
		line-height: 20px;
		background-color: #333;
		border: 2px solid #595959;
	}
	</style>
</head>
<body>
	<div id="geral">
		<div id="cabecalho">CABECALHO</div>
		<div id="esquerda">Esquerda</div>
		<div id="meio">Meio</div>
		<div id="direita">Direita</div>
		<div id="rodape">Rodapé</div>
	</div>
</body>
</html>

Quanto à disposição na estrutura HTML, montei de acordo com a lógica e também por causa do uso do float: veja como ficou acima e veja aqui um exemplo on-line.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Para testar, aumente a altura (height) das divs meio e esquerda/direita.

 

Bom, espero que isso ajude... Qualquer coisa, volte a postar!

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito