Problemas com a distância entre as DIVs

[Eva Morrissey 0]

Preciso resolver o problema de distância entre as camadas, se quiser passar das tabelas para as camadas. O problema é que eu não estou conseguindo fazer o que eu quero...Bem, o problema é o seguinte:O site está feito com uma camada principal. Dentro dessa camada, há duas camadas, uma no rodapé, que servirá para isso, e outra acima, aninhando todo o conteúdo do site.Nessa camada que aninha todo o conteúdo do site, há três camadas. Uma de menu na esquerda, uma de menu na direita, e o centro para conteúdo.Na camada da esquerda (vou usar a esquerda de exemplo para não me repetir, mas o problema na camada direita se repete), tenho 6 camadas. Preciso que a primeira fique fica, no lugar onde coloquei. A segunda também, colada à primeira. A terceira, preciso que mantenha uma distância "x" da segunda. A quarta deve manter uma distância fixa da terceira. A quinta deve manter uma distância "x" da quarta, e a sexta, uma distância fixa da quinta camada. Só que esse layout é para conteúdo dinâmico, então preciso que uma camada não atropele a outra, mas que, quando uma de cima se expanda, as de baixo mantenham a relatividade de distância, sem ficar uma sobre a outra.Preciso, ainda, que a camada de conteúdo do site não atropele o rodapé, caso as camadas se expandam.Deu para entender? Alguém pode me ajudar?

[vagner.net 0]

Eva, você tem um link com a página pra gente ver o que está acontecendo e como esta o CSS do seu layout?

[Paulo de Tarso F. M. 24]

Eva, você tem um link com a página pra gente ver o que está acontecendo e como esta o CSS do seu layout?

É, sem link, sem código, fica complicado... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

[Eva Morrissey 0]

Desculpem!

O link de teste desse layout é esse aqui:

http://www.graalrpg.com/teste/

 

O CSS é esse (desculpem, eu realmente estou aprendendo a brincar com o CSS, então não tenho a menor idéia do que fazer para conseguir o que eu quero!):

 

body {	background-color: #FFFFFF;	scrollbar-face-color: #A25328;	scrollbar-highlight-color: #333333;	scrollbar-shadow-color: #000000;	scrollbar-3Dlight-color: #FFFFFF;	scrollbar-arrow-color: #FFFFFF;	scrollbar-track-color: #F8E0D6;	scrollbar-darkshadow-color: #666666;}p { /* CSS para parágrafos */	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 2px;}/*CSS para os links do menu principal */a.linkprincipal:link {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: underline;}a.linkprincipal:hover {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	font-style: normal;	font-weight: normal;	font-variant: normal;	text-transform: capitalize;	color: #A6572E;	text-decoration: overline}a.linkprincipal:active {	color: #A6572E;}a.linkprincipal:visited {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: underline;}#geral1 { /* camada principal onde todo o site está aninhado */	position:absolute;	left:51%;	top:0px;	width:808px;	height:1951px;	border: none;	margin-left:-402px;	}#geral2 { /*camada secundária onde tudo, exceto rodapé, está aninhado */	position:absolute;	left:0px;	top:0px;	width:807px;	height:1910px;	border: 2px solid #4C2503;	background-image: url(imagens/layout/background.jpg);	clear: both;}/* Aqui são as coisas do topo do site */#topo { /*aqui fica o logotipo do site*/	position:absolute;	left:0px;	top:0px;	width:807px;	height:215px;	clear: both;}#barradenavegacao { /* barra de navegação do topo */	position:absolute;	left:0px;	top:215px;	width:807px;	height:57px;	clear: both;}/* Aqui ficam as coisas que estão do lado esquerdo do site -_- */#colunaesquerda { /* menus da esquerda >.<  */	clear:both;	float: left;	position:absolute;	width:131px;	left: 1px;	top: 272px;}#cenario-logo { /* não mexer nesse */	position:absolute;	left:0px;	top:0px;	width:137px;	height:52px;	clear: both;}#cenario-menu { /*menu do cenário de jogo */	position:absolute;	left:4px;	top:52px;	width:128px;	border-top: none;	padding:0px;	margin-left:0px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	font-weight: normal;	text-transform: none;	font-color: #000000;	line-height: 100%;	background-color: #FFFFFF;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-top-style: none;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-color: #4C2503;	border-bottom-color: #4C2503;	border-left-color: #4C2503;	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 5px;	clear: both;}#enquete-logo { /* título do box de enquete */	position:relative;	left:1px;	top:264px;	width:139px;	height:48px;	clear:both;	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 0px;}#enquete { /* box da enquete */	position:relative;	left:5px;	top:300px;	width:128px;	font-family: Verdana, Arial, Helvetica, sans-serif;	background-color: #FFFFFF;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-color: #4C2503;	border-bottom-color: #4C2503;	border-left-color: #4C2503;	clear:both;	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 5px;}#parceiros-logo { /*título do box dos parceiros */	position:relative;	left:0px;	top:595px;	width:138px;	height:45px;	clear:both;}#parceiros {	text-align: center;	position:relative;	left:4px;	top:640px;	width:128px;	height:276px;	background-color: #FFFFFF;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-top-style: none;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-color: #4C2503;	border-bottom-color: #4C2503;	border-left-color: #4C2503;	hr-align: center;	hr-noshade: noshade;	hr-width: 100%;	hr-height: 1px;	hr-color: #000000;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;	clear:both;	margin-top: 0px;	margin-right: 0px;	margin-left: 0px;	margin-bottom: 0px;}#graalmenu-logo {	position:absolute;	left:2px;	top:2px;	width:126px;	height:52px;}#conteudo {	position:absolute;	left:141px;	top:283px;	width:524px;	height:1625px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #000000;	background-color: #FFFFFF;	border: 2px solid #4C2503;}#graal-menu {	position:absolute;	left:4px;	top:54px;	width:128px;	height:259px;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-color: #4C2503;	border-bottom-color: #4C2503;	border-left-color: #4C2503;	background-color: #FFFFFF;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;}#googleads-logo {	clear:both;	position:absolute;	left:669px;	top:651px;	width:138px;	height:45px;}#googleads {	clear:both;	position:absolute;	left:673px;	top:695px;	width:128px;	height:281px;	background-color: #FFFFFF;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-color: #4C2503;	border-bottom-color: #4C2503;	border-left-color: #4C2503;}#creditos {	clear:both;	position:absolute;	width:808px;	height:20px;	left:1px;	top:1922px;	background-image: url(imagens/layout/background2.jpg);	border: 1px solid #4C2503;}/* aqui vai o css específico da index */#chamada {	position:absolute;	width:520px;	height:88px;	left: 2px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	text-align: center;	color: #000000;	hr-width: 100%;	hr-height: 1px;	hr-noshade: noshade;	hr-color: #000000;}#infosdestacadas {	position:absolute;	width:519px;	height:41px;	left: 2px;	top: 105px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	text-color: #000000;	text-align: center;	hr-width: 100%;	hr-height: 1px;	hr-noshade: noshade;	hr-color: #000000;}.rodape {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;	text-align: center;	margin-top: 2px;	margin-bottom: 2px;}a.rodape:link {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;}a.rodape:visited {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;}a.rodape:hover {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;}a.rodape:active {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;}/* CSS dos destaque do índex */#destaque1 {	position:absolute;	width:516px;	height:187px;	left: 4px;	top: 162px;	border: none;}#destaque2 {	position:absolute;	width:256px;	height:230px;	left: 2px;	top: 358px;}#destaque3 {	position:absolute;	width:256px;	height:230px;	left: 265px;	top: 358px;}.linkprincipalnaoexiste:link {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: line-through;}.linkprincipalnaoexiste:hover {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: line-through;}.linkprincipalnaoexiste:active {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: line-through;}.linkprincipalnaoexiste:visited {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-decoration: line-through;}/* fim de CSS de destaque de índex *//* Título dos destaques da página inicial */.titulo1 { /* título do destaque principal */	font-family: Verdana, Arial, Helvetica, sans-serif;	Text-align: center;	font-size: 14px;	font-weight: bold;	color: #000000;	background-color: #DBB993;}.titulo2 { /* título dos destaques secundários */	font-family: Verdana, Arial, Helvetica, sans-serif;	Text-align: center;	font-size: 12px;	font-weight: bold;	color: #000000;	background-color: #DBB993;}.titulo3 { /* título dos demais destaques */	font-family: Verdana, Arial, Helvetica, sans-serif;	Text-align: center;	font-size: 10px;	font-weight: bold;	color: #000000;	background-color: #DBB993;}/* Textos dos destaque da página principal */.texto1 { /* texto do destaque principal */	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #000000;	text-align: left;	}.texto2 { /* texto dos destaques secundários */	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #000000;	text-align: left;}.texto3 { /* texto dos demais destaques */	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #000000;	text-align: left;}/* estilo de imagens */.botaoparceiros { /* estilo dos botões de parceiros */	align: center;	margin-top: 0px;	margin-left: 0px;	margin-right: 0px;	margin-bottom: 5px;}.imagem1 { /* estilo de imagem do destaque principal */	margin-left: 0px;	margin-right: 7px;}.imagem2 { /* estilo de imagem para os demais destaques */	margin-left: 0px;	margin-right: 7px;	margin-bottom: 5px;}

[Paulo de Tarso F. M. 24]

Olá Eva Morrissey... Bom, para te ajudar nisso, vou te indicar a leitura de dois materiais do Laboratório de Scripts WS:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Layout fixo 3 colunas

Este primeiro para estruturar seu site...

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Atributos: border - padding - margin

Este para aprender a manipular as propriedades que trabalham com estes espaçamentos que você necessita...

Bom, espero que eles possam esclarecer algumas de suas dúvidas... Qualquer coisa, por favor, volte a postar!

 

Boa sorte!

[Eva Morrissey 0]

Olá! muito obrigada pelas dicas!Então quer dizer que, se eu colocar margin-top das divs que quero que mantenham sempre a mesma distância relativa umas das outras, elas páram de se atropelar, mesmo quando o conteúdo da camada de cima aumenta (já que o layout é para conteúdo dinâmico)?Vou testar alterar o CSS desse jeito, que é o que ocorre, pelo que entendi, e depois volto a postar, ok? Vou tentar, também, mexer nas imagens-título dos menus, assim eu diminuo também o número de divs. Não sei exatamente como vou conseguir o efeito que eu quero, mas vou tentar achar uma solução.Mais uma vez, obrigada.

[Paulo de Tarso F. M. 24]

Então quer dizer que, se eu colocar margin-top das divs que quero que mantenham sempre a mesma distância relativa umas das outras, elas páram de se atropelar, mesmo quando o conteúdo da camada de cima aumenta (já que o layout é para conteúdo dinâmico)?

Aham... Quando não estamos usando position: absolute e quando não temos width nem height especificados, desde que estruturado corretamente (como mostrado no tutorial que te indiquei, por exemplo), isso que você perguntou é exatamente o que ocorre...

 

Bom, se surgirem mais dúvidas, por favor, volte a postar! Boa sorte!

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Eva Morrissey 0]

Okay, simplificando o código eu consegui resolver.

Só que surgiu outro problema. No IE, a visualização está correta. Mas no FF, a cor de fundo das colunas laterais não acompanham o conteúdo das divs... isso é bem estranho!

 

http://www.graalrpg.com/teste

[Paulo de Tarso F. M. 24]

Você disse estar certo no IE6? Tem certeza? Dá uma olhada como ficou aqui pelo menos:

Observe na imagem que seu site ficou alinhado à direita e ainda por cima "ganhou" a barra de rolagem horizontal...

 

Bom, quanto ao seu problema citado no FF, isso acontece porque a propriedade height lá no seu CSS está definida... Para que isso não ocorra, simplesmente remova essa propriedade... Quando você não sabe exatamente o conteúdo total de uma div, normalmente especificamos apenas a largura (width) e a altura (height) é automaticamente definida de acordo com op conteúdo...

 

Bom, qualquer coisa, volte a postar!

[Eva Morrissey 0]

Ah sim, esse problema de alinhamento ocorreu pq eu retirei uma das layers, e como fiquei com sono, deixei pra resolver hoje, me desculpe!Ele vai ficar com barra de rolagem vertical, mas não horizontal.Vou retirar a propriedade e ver o que aconbtece... obrigada!