iframe ajustavel

[sacofritoxd]

Boa tarde amigos.

Estou com um problema ao utilizar iframe.

Seguinte tenho uma pagina com meu menu e abaixo meu iframe que chama uma segunda pagina-conteudo. Mas ao chamar estas paginas elas ficam expremidas em um espaço muito pequeno.

Tentei colocar as propriedades height como 100% mas nada feito.

Acredito que o problema seja pois utilizo uma ferramenta chamada CodeCharge Studio para gerar meus layouts, e esta ferramenta gera tudo utilizando table's como o desenho da pagina.

então esta assim minha pagina

<table height="100%" width="100%">
<tr>
<td>
MEU MENU
</td>
</tr>
<tr>
<td><iframe id="principal" height="100%" width="100%" border="0" src="index2.php" frameborder="0" name="principal"></iframe><td>
</tr>
</table>

alguém pode me ajudar?

[Markus Magnus]

A iframe ta ocupando a mesma altura que o menu né?

Se sim isso acontece porque quando se utiliza porcentagens para tamanho elas calculam esse tamanho apartir do tamanho da tag que as engloba, tipo se a tag td, que engloba a tag div nesse caso tem 200px de altura a iframe terá 100% disso que são 200px.

Assim o negócio é você colocar um tamanho fixo em pixels e não em porcentagem na tag td e deixar o height="100%" na iframe, ou setar o tamanho na tag iframe direto, ou então abandonar a estruturação por tabelas que da muita dor de cabeça

Espero ter ajudado

Abrass

[sacofritoxd]

Ola Markus.

Obrigado pela resposta.

Seguinte não tenho como abandonar a estruturação por tabelas pois a ferramenta em que trabalhamos aqui na empresa trabalha desta forma.

Segue exatamente como esta o meu html.

<table border="0" style="WIDTH: 100%; HEIGHT: 100%">

<tr style="HEIGHT: 1px;">

<td>

<table border="0" width="100%">

<tr>

<td>

&nbsp;

</td>

</tr>

</table>

<table border="0" width="100%">

<tr style="BACKGROUND-COLOR: #3d84cc">

<td style="WIDTH: 1%"><strong><font color="#ffffff"><em>Teste</em></font></strong></td>

<td style="WIDTH: 99%">

<!-- BEGIN Menu Menu1 -->

<div class="MenuStyle" id="Menu1Container">

<ul class="adxm {Menu1:MenuType} level1">

<!-- BEGIN Item -->

<!-- BEGIN OpenLevel -->

<ul class="level{Menu1:Item_Level}">

<!-- END OpenLevel -->

<li><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a>

<!-- BEGIN CloseItem --></li>

<!-- END CloseItem -->

<!-- BEGIN CloseLevel -->

</ul>

</li>

<!-- END CloseLevel --><!-- END Item -->

</ul>

</div>

<!-- END Menu Menu1 --></td>

</tr>

</table>

</td>

</tr>

<tr>

<td><iframe id="principal" height="100%" width="100%" border="0" src="index2.php" frameborder="0" name="principal"></iframe></td>

</tr>

[Markus Magnus]

tenta usar assim

<table border="0" style="WIDTH: 100%; HEIGHT: 100%">
<tr style="HEIGHT: 1px;">
<td>
<table border="0" width="100%">
<tr>
<td>
&nbsp;
</td>
</tr>

</table>
<table border="0" width="100%">
<tr style="BACKGROUND-COLOR: #3d84cc">
<td style="WIDTH: 1%"><strong><font color="#ffffff"><em>Teste</em></font></strong></td> 
<td style="WIDTH: 99%">
<!-- BEGIN Menu Menu1 -->
<div class="MenuStyle" id="Menu1Container">
<ul class="adxm {Menu1:MenuType} level1">
<!-- BEGIN Item -->
<!-- BEGIN OpenLevel -->
<ul class="level{Menu1:Item_Level}">
<!-- END OpenLevel -->
<li><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a> 
<!-- BEGIN CloseItem --></li>
<!-- END CloseItem -->
<!-- BEGIN CloseLevel -->
</ul>
</li>
<!-- END CloseLevel --><!-- END Item -->
</ul>

</div>
<!-- END Menu Menu1 --></td> 
</tr>

</table>
</td> 
</tr>
<tr>
<td><iframe id="principal" height="500px" width="100%" border="0" src="index2.php" frameborder="0" name="principal"></iframe></td> 
</tr>

ou

<table border="0" style="WIDTH: 100%; HEIGHT: 100%">
<tr style="HEIGHT: 1px;">
<td>
<table border="0" width="100%">
<tr>
<td>
&nbsp;
</td>
</tr>

</table>
<table border="0" width="100%">
<tr style="BACKGROUND-COLOR: #3d84cc">
<td style="WIDTH: 1%"><strong><font color="#ffffff"><em>Teste</em></font></strong></td> 
<td style="WIDTH: 99%">
<!-- BEGIN Menu Menu1 -->
<div class="MenuStyle" id="Menu1Container">
<ul class="adxm {Menu1:MenuType} level1">
<!-- BEGIN Item -->
<!-- BEGIN OpenLevel -->
<ul class="level{Menu1:Item_Level}">
<!-- END OpenLevel -->
<li><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a> 
<!-- BEGIN CloseItem --></li>
<!-- END CloseItem -->
<!-- BEGIN CloseLevel -->
</ul>
</li>
<!-- END CloseLevel --><!-- END Item -->
</ul>

</div>
<!-- END Menu Menu1 --></td> 
</tr>

</table>
</td> 
</tr>
<tr height="500px">
<td><iframe id="principal" height="100%" width="100%" border="0" src="index2.php" frameborder="0" name="principal"></iframe></td> 
</tr>

e vai tentando arrumar a quantidade de pixels na altura que for bom pra você

[sacofritoxd]

Fala Markus. ambas as formas funcionaram. Mas oque acontecerá se o usuario estiver usando uma resolução diferente da que estou desenvolvendo?

Editado Fevereiro 24, 2012 por sacofritoxd

[Markus Magnus]

A janela ficará pequena de mais ou grande demais de dependendo da diferença de resolução.

Esse é um dos problemas que a criação de sites por tabelas causa.

Pelo menos eu não sei como resolver....

Abraços

[sacofritoxd]

Estes problemas não acontecem se eu utilizar divs(esta é a unica maneira de reorganizar o layout fora as tabelas?)? e outros tipos de estruturação?

[Markus Magnus]

Com certeza não terá problemas, claro que você tem que trabalhar com o CSS, mas você tem muito mais opção para trabalhar com div's do que com table's existem outras tags que você pode usar, mas a grande diferenciação é entre usar ou não table's, entre as tags que não são table a tag div é a coringa, pau pra toda obra.

[sacofritoxd]

Certo. O css é realmente muito útil e deixa o trabalho mais simples pelo pouco que li a respeito e tambem o pouco que 'brinquei' com ele.

Obrigado por enquanto amigo! Deu certo suas sugestões.