(Resolvido) Ajuda com divs

[Ricardo - PTR]

Boa tarde galera,

Estou trabalhando em um site de um cliente e, desde que comecei a trabalhar com web uso tabelas pra organizar o layout, porém isso já está ultrapassado, e estou querendo me atualizar com as divs.

Tentei criar o site com um menu no topo, um banner central, uma barra com os titulos e o caminho percorrido no site, conteudo (formado por 3 colunas) e rodape.

O que acontece é que já faz uma semana que estou pesquisando e, um problema sempre aparece neste layout.

Quando as colunas de conteúdo ficam em 100%, as outras não acompanham, quando as outras acompanham, tudo fica em cima do rodapé. Entre outros problemas.

Gostaria de saber se vocês podem me da uma ajuda com o código inicial deste layout para que eu possa dar continuidade.

Segue os códigos que estou usando(deixei apenas o que acredito ser importante):

css:

/*  ínicio css   */
*{margin:0px; padding:0px; border: 0px;}

html, body{height:100%;}

/*  div geral do site   */
#geral {width:1258px; margin:0 auto; height: 100%;}

/*  div com menu do topo */
#topo {width: 1258px; height:64px; margin-bottom: 10px;}

/*  div com banner, localizao abaixo do menu  */
#banner_slides {width: 1248px; height: 275px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px;}

/*  div com o titulo   */
#barra_titulo {width: 1248px; height: 45x; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; margin-top: 10px; overflow:hidden;}


/*  ínicio do conteúdo   */
#principal {width: 1248px; height: 100%; margin-left: 5px; margin-right: 5px;}

/*  dentro da div principal, inseri 3 colunas: esquerda, meio e direita   */
#coluna_esquerda, #coluna_direita, #meio {float:left; height: 100%;}

#coluna_esquerda {width:242px;}

#coluna_direita {width:242px;}

#meio {width:744px; margin-left: 10px; margin-right: 10px;}



/*  dentro de cada uma destas colunas tera um um quadro com as bordas arredondadas, dividi ele em 3 linhas: superior, central e inferior. Abaixo deste quadro poderá ser inserido mais conteúdo(em qualquer uma das 3 colunas)   */
.painel-superior {width: 100%; height: 9px;}
.painel-superior .esq {width: 9px; height: 9px; float: left;}
.painel-superior .meio {height: 9px; background: url(../imagens/pnl_c.png) repeat-x; float: left;}
.painel-superior .dir {width: 9px; height: 9px; float: left;}

.painel-central {overflow: hidden; height: 100%;}
.painel-central .esq {width: 9px; float: left; background: url(../imagens/pnl_e.png) repeat-y; height: 100%;}
.painel-central .meio {float: left; height: 100%;}
.painel-central .dir {width: 9px; float: left; background: url(../imagens/pnl_d.png) repeat-y; height: 100%;}
.titulo-painel {width: 214px; border: #d4d4d4 1px solid; background-color: #f7f7f7; padding: 5px; margin-top: 10px; margin-bottom: 5px; font-family: arial; font-size: 12px; color: #666; font-weight:bold;}
.subtitulo-painel {width: 204px; font-family: arial; font-size: 12px; color: #999; margin-left: 20px; margin-top: 2px; margin-bottom: 2px; font-weight:bold;}

.painel-inferior {width: 100%; height: 9px;}
.painel-inferior .esq {width: 9px; height: 9px; float: left;}
.painel-inferior .meio {height: 9px; background: url(../imagens/pnl_r.png) repeat-x; float: left;}
.painel-inferior .dir {width: 9px; height: 9px; float:right;}


/*  ínicio rodape   */
#rodape {width: 1248px; height:40px; clear:both; position: relative; margin-top: 30px; margin-left: 5px; margin-right: 5px;}

html

<!-- ínicio -->
<div id="geral">

<!-- ínicio topo -->
<div id="topo">aqui vai o menu do topo</div>
<!-- fim topo -->

<!-- ínicio banner -->
<div id="banner_slides">aqui vai o banner rotativo</div>
<!-- fim banner -->

<!-- ínicio barra de título -->
<div id="barra_titulo">aqui vai o titulo da página</div>
<!-- fim barra de título -->

<!-- ínicio conteúdo da página -->
<div id="principal">

<!-- ínicio da coluna da esquerda, as imagens são apenas as bordas arredondadas -->
<div id="coluna_esquerda">

<div class="painel-superior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div>
<div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div>
</div>

<div class="painel-central">
<div class="esq"></div>
<div class="meio" style="width: 224px;">
<div class="titulo-painel">:: Antropometria</div>
<div class="subtitulo-painel">Antropometria</div>
<div class="subtitulo-painel">Cardiologia</div>
<div class="subtitulo-painel">Software</div>
<div class="subtitulo-painel">Pediatria</div>

<div class="titulo-painel">:: Monitores de Frequencia Cardíaca</div>
<div class="subtitulo-painel">Monitores Cardíacos</div>
<div class="subtitulo-painel">Pedômetro</div>
<div class="subtitulo-painel">Cronômetros</div>


<div class="titulo-painel">:: Fisioterapia</div>
<div class="subtitulo-painel">Anatomia</div>
<div class="subtitulo-painel">Eletroterapia</div>
<div class="subtitulo-painel">Reabilitação</div>
<div class="subtitulo-painel">Faixa Elástica e Acessórios</div>
<div class="subtitulo-painel">Respiratória</div>

<div class="titulo-painel">:: Treinamento Desportivo</div>
<div class="subtitulo-painel">Condicionamento Físico</div>
<div class="subtitulo-painel">Arbitragem</div>

<div class="titulo-painel">:: Glicemia, Colesterol e Lactato</div>

<div class="titulo-painel">:: Diversos</div>
</div>
<div class="dir"></div>
</div>

<div class="painel-inferior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div>
<div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div>
</div>

</div>
<!-- fim da coluna esquerda-->

<!-- inicio da coluna do meio-->
<div id="meio">
<div class="painel-superior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div>
<div class="meio" style="width: 726px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div>
</div>

<div class="painel-central">
<div class="esq"></div>
<div class="meio" style="width: 726px;"><#pagina>

</div>
<div class="dir"></div>
</div>

<div class="painel-inferior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div>
<div class="meio" style="width: 726px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div>
</div>

</div>
<!-- fim da coluna do meio-->



<!-- inicio da coluan direita-->
<div id="coluna_direita">

<div class="painel-superior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div>
<div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div>
</div>

<div class="painel-central">
<div class="esq"></div>
<div class="meio" style="width: 224px;"><#lateral></div>
<div class="dir"></div>
</div>

<div class="painel-inferior">
<div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div>
<div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div>
<div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div>
</div>

</div>
<!-- fim da coluna direita-->

</div>
<!-- fim conteúdo da página -->


</div>

<!-- ínicio rodapé -->
<div id="rodape">
rodape
</div>
<!-- fim rodapé -->

<!-- fim -->

Obrigado.

[_Vinny_]

Você tem a página hospedada onde eu possa vê-la? Fica mais fácil de ver o problema e analisar.

[Ricardo - PTR]

vou subir ela e ai insiro o link aqui

obrigado.

segue o link da página já no ar(ignore as imagens do menu por favor, fiquei com preguiça de alinha isso):

http://www.sanny.com.br/si/site/3100

nesse caso, o rodapé ficou em cima do conteúdo.

Se eu consigo colocar embaixo, ou o conteúdo some dentro do espaço dele após atingir o limite da div principal. Ou ele não estica em 100%.

Lembrando que neste site o conteúdo será dinamico, com um editor online para o mesmo. Por este motivo estou sofrendo tanto :wacko:

obrigado novamente

Editado Novembro 4, 2010 por Ricardo - PTR

[Ricardo - PTR]

galera não sei se vocês vão conseguir me entender, mas dei uma pesquisada e, aparentemente o código

document.getElementById("div_id").offsetHeight;

somado a

style.width

resolveria todo o meu problema, pois poderia definir a algura de uma div do conteúdo para as outras.

o único problema é: eu não sei usa isso o.o

alguém pode me da um help ai por favor?

obrigado.

Editado Novembro 4, 2010 por Ricardo - PTR

[_Vinny_]

Hum, isso seria já da parte de javascript.

[Ricardo - PTR]

hummm =/

firmeza vo ve la se alguém me ajuda =D

vlws ae vinny ^^

edit:

achei a solução pro problema segue o código caso alguém tenha um problema semelhante:

<script language="JavaScript" type="text/javascript">
function get_height(){

x = document.getElementById("meio").offsetHeight;
y = document.getElementById("dir");
z = document.getElementById("esq");

y.style.height=(x + 'px');
z.style.height=(x + 'px');
}
</script>

Obrigado.

Editado Novembro 5, 2010 por Ricardo - PTR

[_Vinny_]

Hum, ótimo e que bom que compartilhou a solução.