problema com divs

[Raoni 0]

Bom dia pessoal!!!!!

 

tenho o seguinte codigo:

 

<div id="corpo">

<div id="esquerda">

<div id="esquerdatop">

<?

include("templates/vnd_cat1/esq_top.html");

?>

</div>

<div id="esquerdabot">

<?

include("templates/vnd_cat1/esq_bot.html");

?>

</div>

</div>

 

<div id="direita">

<div id="direitatop">

<?

include("templates/vnd_cat1/dir_top.html");

?>

</div>

<div id="direitabot" onscroll="rolaOutraDivs()">

<?

include("templates/vnd_cat1/dir_bot.html");

?>

</div>

</div>

</div>

arquivo css:

#esquerda{

width:500px;

height:500px;

background-color: #ffffff;

position:fixed;

float:left;

overflow:hidden;

}

 

#direita{

width:495px;

height:500px;

background-color: #ffffff;

position:absolute;

float:left;

}

 

#esquerdatop{

height:162px;

width:500px;

background-color: #ffffff;

left:0px;

top:0px;

overflow:hidden;

border-style: solid;

border-color: #0000FF;

}

 

#direitatop{

height:162px;

width:495;

background-color: #ffffff;

position:relative;

float:left;

overflow:hidden;

border-style: solid;

border-color: #0000FF;

}

 

#esquerdabot{

width:500px;

height:310px;

background-color: #ffffff;

scrollTop:direitabot.escrollTop;

overflow:hidden;

background-color: #000000;

border-style: solid;

border-color: #0000FF;

}

 

#direitabot{

width:515px;

height:330px;

background-color: #000000;

overflow:scroll;

border-style: solid;

border-color: #0000FF;

}

 

o problema esta nos dois div de baixo (direitabot e esquerdabot )quando coloco tables nos htmls manualmente (as duas tables com o mesmo numero de linhas), os dois divs ficam sincronizado, linha com linha. Mas quando eu populo eles pelo php com varias linhas, o div da direitabot, fica com um espaçamento em cima, assim nao sincronizando os dois.

 

Alguem saberia me dizer como eu resolvo isso? Será que é alguma coisa no css??

 

 

obs> nao intendo muito de css.

 

 

obrigado!

Raoni

[brcontainer 16]

tem um link pra podermos testar(já que tem uma parte em PHP)

se puder passar =]

 

falow

[Juninho14 0]

O Problema esta no seu arq de template do php, ele q está dando esse espaço... manda um link pra gente ver

 

[]s

[Raoni 0]

putz pessoal... pior que nao tenho... é uma aplicacao interna na vpn, e nao temos links externos :(

 

o mais esquisito, é que esse problema tem hora que aparece e tem hora que nao. Por exemplo, mando carregar a pagina, ele aparece com os dois divs corretos, depois mando carregar novamente, ele aparece errado ou vice versa, ou ate (mais esquisito), quando ele carrega errado, e visito uma outra pagina qualquer e volto nela ele esta ok!

 

nao estou entendendo nada disso... rs

 

 

teriam alguma ideia??? alem do link oq posso postar para me ajudar?

[programador php 0]

tenta colocar um height na td da tabela!!!

 

abraço

[Raoni 0]

as duas tabelas estao iguais em tamanho e linhas, somente em colunas que sao diferentes. e os divs estao com os tamanhos, espaçamentos tudo iguais.

[brcontainer 16]

roda seu código pelo navegador e exibe o código fonte copia e posta como ele é visualizado

assim fica facil pois é a parte HTML incluida que acho que esta te afetando

 

falow

[Raoni 0]

são muitos dados (400 colunas e 100 linhas), e quando exporto o html, ele funciona certinho!

[brcontainer 16]

creio que seu erro seja nas tabelas =/

mas se não tem como analia-las ae você complica né?

as linhas da tabelas seguem algum padrão??

se seguir faça um exemplo do padrão tipo com tres linhas

 

e quando exporto o html, ele funciona certinho!

quanto a isso acho que funciona porque você roda local(sem apache só abre como se fosse um arquivo)

 

tipo você salva como arquivo no seu PC e depois da dois cliques e roda(Eba fraca da explicação hehehe)

 

tenho quase certeza disso =]

 

outra coisa que notei você usa um negocio no CSS por acaso você só testou no IE

e FF e Opera(mas já que é uma operação intranet acho que vcs devem usar o IE mesmo).

Testa em outros navegadores quem sabe você encontra o erro do seu código =]

 

 

[atualizado]

cara testei seu código tah muito esquisito =/ acho que tah mal aplicado

melhor você revisar...

 

no FF ficou pior ainda

 

o que exatemente você quer fazer

será que da pra por um desenho do que seria??

(não to zuando seu código só to falando que ficou meu deslocado -esquito- malz ae pelo comentario mas é verdade)

 

falow

[Raoni 0]

entao cara...

to achando muito esquisito mesmo (como disse antes nao sei muito css), mas agora que eu ja populei os dados todos, em 90% das vezes ele funciona, mas nesses outros 10% ele desloca as divs, nao sei pq...

outra coisa mais esquisita, quando acontece de deslocar, eu abro no mesmo navegador, atraves de abas, o site do uol, por exemplo (nao testei com outros), e volto na minha aplicacao, aí as divs estao todas em seus devidos lugares...

 

será que tem algum codigo que resolve isso?

 

q você acha???

 

 

obrigado!

[brcontainer 16]

que eu acho é que você deve fazer um desenho explicando jeito que você quer seu layout

(é pra ver se eu posso te ajudar =])

ou estudar sobre CSS+(X)HTML

antes de por online algo que não funciona 100%

 

;)

[Giovani 104]

Seria uma forma de entender o problema http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

que eu acho é que você deve fazer um desenho explicando jeito que você quer seu layout

[Raoni 0]

Bom dia pessoal!

 

Estou postanto as duas figuras, dos divs:

 

o esperado:

 

 

o erro:

 

 

 

as duas paginas tem o mesmo codigo, que esta nos primeiros posts.

 

Me ajudem!!!!!

 

obrigado

[brcontainer 16]

1° seu LAYOUT não é dificil

quem tah se complincando é você =/, eu refiz o seu código

analize ele e teste ;)

 

tente assim:

<style>
*{
margin:0;
padding:0;
}
#global{
margin:5;
width:1020px !important;
width:1000px;
height:500px;
background:#fc0;
}
#div1,#div2,#div3,#div4{
border: 5px blue solid;
}
#div1{
float:left;
background:#ddd;
width:490px;
height:155px;
}
#div2{
float:right;
background:#ddd;
width:485px;
height:155px;
margin-right:25px;
}
#div3{
float:left;
color:#fff;
background:#000;
width:490px;
height:290px;
}
#div4{
float:right;
color:#fff;
background:#000;
width:510px;
height:315px;
overflow:scroll;
}
</style>

<div id="global">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>

Ps.: me desculpe a sinceridade mas tah feinho seu layout você poderia remodelar ele né??

tem coisas extranahs no seu CSS:

 

tipo:

#esquerdatop{
height:162px;
width:500px;
background-color: #ffffff;
left:0px;
top:0px;
overflow:hidden;
border-style: solid;
border-color: #0000FF;
}

em um lugar onde nem há position

por isso refiz seu layout =[ acho melhor você estudar um pouquinho mais

e o que eu fiz espero que você não o copie inteiro use ele pra estudar sua própria ideia

falow abraço

[Raoni 0]

entao.... o layout é facil, mas valew pela força!!!

 

percebi que você definiu o tamanho do div externo:

 

#global{

margin:5;

width:1020px !important;

width:1000px;

height:500px;

background:#fc0;

}

no meu, nao esta definido e somente o tamanho e posições para os internos, sera que pode ser isso que tem hora que ele fica louco???

 

vou testar aqui. o layout sem os dados populado é feio mesmo! e essas cores coloquei para somente identifica, entende, ne?

 

Imagina uma tabela do excel, esse layout parece bastante, onde tenho div1 que ficar parado, div2 mexer somente na horizontal de acordo com o div4 e, o div3 vai mexer na vertical de acordo com o div4. Assim fica como se fosse uma tabela com colunas e linhas congeladas, ok?

 

 

segua a imagem completa:

 

acho que agora da pra entender melhor !!!!

[brcontainer 16]

eu tirei o background-color e descobri uma coisa uma DIV tah por cima da outra no seu CSS

você tah usando POSITION:FIXED; no #esquerda

 

position:absolute; no #direita

 

e no #direitatop você poz float:left; sem necessidade

pra que isso??

 

melhor você criar uma DIV global (PAI) com WIDTH definido pois seu LAYUOT quebra em monitores

menores =/

 

refiz seu código tirando todos os pontos errados (só os mais criticos pq ainda tem muita coisa errada)

<html>
<style type="text/css">
#corpo{
width:1000px !important;
width:1015px;
}
#esquerda{
width:500px;
height:500px;
float:left;
overflow:hidden;
}

#direita{
width:500px;
height:500px;
float:right;
}

#esquerdatop{
height:162px;
width:500px;

left:0px;
top:0px;
overflow:hidden;
border-style: solid;
border-color: #0000FF;
}

#direitatop{
height:162px;
width:495;

overflow:hidden;
border-style: solid;
border-color: #0000FF;
}

#esquerdabot{
width:500px;
height:310px;

scrollTop:direitabot.escrollTop;
overflow:hidden;

border-style: solid;
border-color: #0000FF;
}

#direitabot{
width:515px;
height:330px;

overflow:scroll;
border-style: solid;
border-color: #0000FF;
}
</style>
<div id="corpo">
<div id="esquerda">
<div id="esquerdatop">
<? include("templates/vnd_cat1/esq_top.html"); ?>
</div>
<div id="esquerdabot">
<? include("templates/vnd_cat1/esq_bot.html"); ?>
</div>
</div>

<div id="direita">
<div id="direitatop">
<? include("templates/vnd_cat1/dir_top.html"); ?>
</div>
<div id="direitabot" onscroll="rolaOutraDivs()">
<? include("templates/vnd_cat1/dir_bot.html"); ?>
</div>
</div>
</div>

[Raoni 0]

entao... esse div dentro do outro (os esquerda e direita bot) eu coloquei pois preciso de um espaco com o de cima. posso colocar direto o padding, mas quando utilizo a barra de rolagem, ele fica junto dinovo com os divs de cima.

 

nao entendi uma coisa:

esse corpo, no caso seria o pai, pq você colocou esse !important???? e dois width???

 

estou testando ele.

 

obrigado

[brcontainer 16]

entao... esse div dentro do outro (os esquerda e direita bot) eu coloquei pois preciso de um espaco com o de cima. posso colocar direto o padding, mas quando utilizo a barra de rolagem, ele fica junto dinovo com os divs de cima.

 

vou testar esse que me passou!!!

eu não to falando de DIVs eu to falando de "position", "top", "left" e "float"

 

leia o q escrevi eu sei que é meio chato ficar lendo tudo isso mas é rapidinho =/

se você quiser entender seus ERROS (que eu ja os percebi)

 

malz falar tudo isso mas é verdade tem coisa desnecessaria em seu código

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

[Raoni 0]

estou aprendendo css na marra!!!!

 

continuo nao entendendo esse !important

[brcontainer 16]

!important é só interpretado pelo FF

assim:

 

width:1000px !important; //ESSE é PRO FF

width:1015px; // ESSE é PRO IE

 

 

você testou o código que eu refiz seu

diz se funcionou ou não você nem havia perguntado do !important

 

se tem de falar sse deu certo ou não ;)

 

ó o código de novo (ESSE é O SEU CORRIGIDO)

<html>
<style type="text/css">
#corpo{
width:1000px !important;
width:1015px;
}
#esquerda{
width:500px;
height:500px;
float:left;
overflow:hidden;
}

#direita{
width:500px;
height:500px;
float:right;
}

#esquerdatop{
height:162px;
width:500px;

left:0px;
top:0px;
overflow:hidden;
border-style: solid;
border-color: #0000FF;
}

#direitatop{
height:162px;
width:495;

overflow:hidden;
border-style: solid;
border-color: #0000FF;
}

#esquerdabot{
width:500px;
height:310px;

scrollTop:direitabot.escrollTop;
overflow:hidden;

border-style: solid;
border-color: #0000FF;
}

#direitabot{
width:515px;
height:330px;

overflow:scroll;
border-style: solid;
border-color: #0000FF;
}
</style>
<div id="corpo">
<div id="esquerda">
<div id="esquerdatop">
<? include("templates/vnd_cat1/esq_top.html"); ?>
</div>
<div id="esquerdabot">
<? include("templates/vnd_cat1/esq_bot.html"); ?>
</div>
</div>

<div id="direita">
<div id="direitatop">
<? include("templates/vnd_cat1/dir_top.html"); ?>
</div>
<div id="direitabot" onscroll="rolaOutraDivs()">
<? include("templates/vnd_cat1/dir_bot.html"); ?>
</div>
</div>
</div>

abraço