Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
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
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;}
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!
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.
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
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!
Você disse estar certo no IE6? Tem certeza? Dá uma olhada como ficou aqui pelo menos:
/applications/core/interface/imageproxy/imageproxy.php?img=http://br.geocities.com/fan_capital_inicial/problemas_com_distancia_entre_divs/tela.gif&key=ed20de8e18f0013e5731a102db3879b5ede3577d72ad56e9c2b061182bd90d70" alt="Imagem Postada" />
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!
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!
Eva, você tem um link com a página pra gente ver o que está acontecendo e como esta o CSS do seu layout?