Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jrodrigomor

iframe interfere no tamanho de div mexendo no layout

Por , em Desenvolvimento frontend

Recommended Posts

jrodrigomor    0

jrodrigomor
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Olha, mesmo me parecendo um layout simples, poste um exemplo para nós podermos lhe ajudar.E tipo, eu vendo seu CSS, você declara muita coisa que não precisa...Como estou meio sem tempo, gostaria de ver um exemplo que ficaria mais fácil de resolver...[]s

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrodrigomor    0

jrodrigomor
Postado
Aqui vai os arquivos da página.

E tipo, eu vendo seu CSS, você declara muita coisa que não precisa...

Alkaeda eu ainda vou melhorar bastante ele, enquanto isso vou comentando o que não importa, mas valeu pela dica.

overflow: hidden; no container do iframe?

JMenezes, eu tentei isso mas não deu certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrodrigomor    0

jrodrigomor
Postado

Jmenezes, o overflow: hidden; na div conteudo fez omitir o iframe que está sobrando. Só que o scroll do iframe continua a descer, ainda há conteúdo ali, só não está visível. Mas já é quase uma saída. Só falta o iframe pegar o espaço correto do container conteudo e não vazar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alemex    0

alemex
Postado

iaew jrodrigomor...

 

intaum... olhei o seu problema.. no FF fica normal... mas no IE ele gera a tal outra scrollbar horizontal por causa da imagem de header neh...

 

faz o seguinte...

 

a estrutura você dexa assim:

<body>		<div id="fundo">			<div id="geral">				<div id="topo"></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 no css você coloka assim:

#topo {	background:transparent url('../caminho/para/sua/imagem.gif') no-repeat top left;	height: 100px;}
veja se isso resolve seu problema e nos conte... =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrodrigomor    0

jrodrigomor
Postado
alemex, no Firefox não tá 100% pq tem 2 problemas: esse que você viu q acontece só no IE e o problema com o iframe vazando, q tá assim em qquer browser. Segui a sua dica mas não funcionou: a imagem sumiu, além de aumentar mais o tamanho no geral. As divs topo e o rodapé estão como position: absolute;. Se eu setar ambas como position: relative; elas ficam no lugar certo mas geram um scroll pq somam o tamanho deles + 100% q eu defini no geral... :wacko:

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrodrigomor    0

jrodrigomor
Postado

Galera, eu desisti da idéia de utilizar iframe, não estava dando muito certo. Reformulei o código (que por sinal estava um tanto sujo e com muitos erros gritantes) e vou tentar por outro caminho. Mas mesmo assim obrigado pela atenção de todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Galera, eu desisti da idéia de utilizar iframe

Ótima decisão :)[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito