iframe interfere no tamanho de div mexendo no layout
Olá pessoal, esse é meu 1º post e espero obter ajuda, além de ajudar também! Estou aprendendo a trabalhar com divs e CSS há pouco e tenho uma dúvida:
É uma página com largura de 780px, definido na div geral. Possui um (div) menu localizado à esquerda, um (div) topo de 100px de height onde ficará a logomarca e um (div) conteudo, onde ficará o iframe e abrirá as páginas selecionadas pelos links do menu. Há também um (div) rodapé de 15px height e uma div chamada fundo, que coloquei uma imagem de background repetitiva.
O que acontece: ao setar o valor height do iframe em 100%, ele não obedece a div conteúdo, ultrapassando a margem de visualização da tela do monitor, que seria o 100% definido no conteúdo. Isso gera mais um scroll vertical (e o normal seria só o scroll do iframe, que está setado como auto). Um detalhe: o iframe possui 100px de margin-top para que o topo não o sobreponha, não passe por cima. E é esse o tamanho é exatamente o tamanho que está sobrando no fim da página.
Tudo isso que citei ocorre no Firefox e Safari for Windows. Já no Opera o tamanho do iframe não acompanha o tamanho do conteúdo. No I. Explorer, além disso tudo, a imagem do topo fica estranhamente alinhada à direita, assim como a div rodapé. Já tentei fazer de tudo mas não encontrei uma solução. O que posso fazer para corrigir isso?!? Abaixo as linhas:
... <body> <div id="fundo"> <div id="geral"> <div id="topo"><img src="imagens/superior.png"></div> <div id="menu"> ...... </div><!-- fim da div menu --> <div id="conteudo"> <iframe class="if" src="home.html" name="conteudo" frameborder="0" scrolling="auto"></iframe> </div><!-- fim da div conteúdo --> <div id="rodape"><p class="rodape"> - rodape - </p></div> </div><!-- fim da div geral --> </div><!-- fim da div fundo --> </body>...
E o código CSS:
{ margin: 0; padding: 0; }body { text-align: center; } #geral { height: 100%; background-color: 48a0c8; width: 780px; margin: auto;}#topo { position: absolute; /height: 100px; /}#menu { /height: 100%;/ width: 150px; background-color: 48a0c8; padding: 10px; margin-top: 100px;}html>body #menu { width: 130px; /height: auto;/} / hack /#menu { float: left; } #conteudo { height: 100%; background-color: #fff; margin-left: 150px; padding: 0px;}#rodape { position: absolute; bottom: 0px; background-color: #039; width: 780px; height: 15px; clear: both; / não permitindo que objetos "flutuantes" obstruam o rodapé. */}#fundo{ background-image: url(imagens/fundo.png); background-repeat: repeat;}p.rodape{ font-family: Arial, Verdana, Nimbus Sans L; font-size: 8px; font-weight: bold; color: fff; text-align: center; text-decoration: none;}iframe.if{ margin-top: 100px; margin-bottom: auto; width: 100%; height: 100%; border: 0;}table.esquerdo{ text-align: left; width: 130px;}a.esq{ font-family: Arial, Verdana, Nimbus Sans L; font-size: 11px; font-weight: bold; color: 585252; text-decoration: none;}body.principal{ margin: 20px 20px 20px 35px; background-image: url(imagens/curva.png); background-color: #fff; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font: 13px Verdana, Nimbus Sans L; text-align: justify;}Obs.: as linhas comentadas nas CSS aparentemente não alteraram a página. aparentemente.
Agradeço desde já a atenção recebida.
Discussão (10)
Carregando comentários...