Ir para conteúdo

POWERED BY:

Arquivado

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

Rapha Designer

iFrame!

Por , em Desenvolvimento frontend

Recommended Posts

Rapha Designer    0

Rapha Designer
Postado

Pessoal, tudo bem?

 

Estou criando um site, mas não sou Expert nisso, sempre fiz alguns sites, mas esse estou precisando de ajuda.

 

Criei um div, e coloquei dois IFrames dentro. Um na esquerda, outro na direita. O da direita, vai abrir o conteúdo, o da esquerda, é o menu.

Assim que clico no link do menu, ele abre no iframe da direita. Até aí tudo bem, eu sei fazer isso, pois é o mesmo princípio do Frame comum.

 

O problema é, o Frame de conteúdo, pode ter barra de rolagem, e etc, mas o frame do Menu, não pode.

 

Eu defini como 

scrolling="no"

, mas ainda não foi suficiente. O conteúdo da página que ele está abrindo, a página do menu, não está fixa, mesmo sem a barra de rolagem, se eu clicar e arrastar o mouse, ele mostra toda a área da página html, e o menu se perde.

Como eu posso definir, para que ele mostre somente uma parte desejada de uma página HTML? E fique fixo naquela parte?

 

Fora que no IE aparece corretamente o conteúdo, ou seja, a parte superior esquerda, já no Chrome, ele mostra o contrário, mostra a parte inferior direita da página HTML que está abrindo no iFrame, como posso fixar, de maneira que o iframe mostre exatamente o que eu quero na página?

 

Segue o código da página dos iFrame's:

 

<style type="text/css">
<!--
.div_pai {
height: 673px;
width: 964px;
font-family: Tahoma;
font-size: 12px;
color: #000;
clear: none;
float: none;
z-index: 1;
background-image: url(news_fake.jpg);
vertical-align: bottom;
}
.principal {
font-family: Tahoma;
font-size: 12px;
color: #000;
padding-top: 0px;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 2;
padding-right: 0px;
height: 493px;
}
.rodape {
font-family: Tahoma;
font-size: 12px;
color: #333;
padding-top: 25px;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 2;
padding-right: 0px;
height: 50px;
text-align: center;
}
.cabecalho {
font-family: Tahoma;
font-size: 12px;
color: #000;
padding-top: 0px;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 2;
padding-right: 0px;
height: 130px;
}
-->
</style>
<body background="back.jpg" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<center>
<div class="div_pai" id="pai">

 <div class="cabecalho" id="cabecalho" align="center">
   <p id="cabecalho"><img src="cabecalho_fake.jpg" width="964" height="130" border="0" align="top"></p>
 </div>

 <div class="principal" id="conteudo">
   <iframe name="menu" id="menu" width="180" height="490" src="menu_news.html" frameborder="0" scrolling="no"></iframe>
   <iframe name="conteudo" id="conteudo" width="700" height="490" src="news_principal.html" frameborder="0"></iframe>
 </div>

<div class="rodape" id="rodape"><strong>Toutatis Brasil.</strong> Rua da Quitanda, 101, 1º andar - Centro - CEP 01012-010 - São Paulo - SP - Brasil  - Fone: +55 (11) 3614-4000</div>
</div>
</center>
</body>

 

Abraços,

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoyalFlush    0

RoyalFlush
Postado

Olá's

 

Veja se o iframe tem a propriedade "noresize", como os frames, não tenho crtz pq não uso iframe com frequencia

 

Ficaria algo como

<iframe src="frame_a.htm" noresize="noresize" />

 

Mas sobre o seu layout, veja se realmente você precisa de iframes para ele, o seu unico objetivo é manter o usuario

na pagina em quanto ele navega pelos itens do menu, pode fazer isso com ajax, de uma procurada na função "load" do jquery

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rapha Designer    0

Rapha Designer
Postado

Bom, quanto aos iframes, eu resolvi pela metade. O iframe que apresentava o Menu, eu tirei, e deixei só o frame para conteúdo.

Trabalhei com Div no lugar do iframe, já que o menu só precisava ser bem posicionado, e deveria aparecer em todas as páginas.

 

Quanto ao Ajax, não sei ao certo se consigo, pois nunca fiz nada em Ajax.

 

Bom, agora me deparei com outro problema, que antes nunca tinha acontecido. Sempre fiz sites, que o conteúdo, texto, imagens etc, não ultrapassavam a largura do Div, mas conforme linhas fossem acrescentadas, a Div aumentava verticalmente, e o layout se ajustava ao conteúdo.

Hoje, preciso fazer justamente o contrário. Preciso travar a Altura(height) e Largura(width) da DIV, de certa forma consegui, a Div se mantem com a mesma largura, mas o texto ultrapassa a dimensão da Div, e não consegui travar a altura. Já declarei no CSS a altura e largura da Div, mas não adiantou, não sei como restringir o texto somente para aquelas medidas da Div.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoyalFlush    0

RoyalFlush
Postado

Bom, quanto aos iframes, eu resolvi pela metade. O iframe que apresentava o Menu, eu tirei, e deixei só o frame para conteúdo.

Trabalhei com Div no lugar do iframe, já que o menu só precisava ser bem posicionado, e deveria aparecer em todas as páginas.

 

Quanto ao Ajax, não sei ao certo se consigo, pois nunca fiz nada em Ajax.

 

Bom, agora me deparei com outro problema, que antes nunca tinha acontecido. Sempre fiz sites, que o conteúdo, texto, imagens etc, não ultrapassavam a largura do Div, mas conforme linhas fossem acrescentadas, a Div aumentava verticalmente, e o layout se ajustava ao conteúdo.

Hoje, preciso fazer justamente o contrário. Preciso travar a Altura(height) e Largura(width) da DIV, de certa forma consegui, a Div se mantem com a mesma largura, mas o texto ultrapassa a dimensão da Div, e não consegui travar a altura. Já declarei no CSS a altura e largura da Div, mas não adiantou, não sei como restringir o texto somente para aquelas medidas da Div.

Olá's

 

Bom, quanto a div com tamanho fixo é tranquilo, você pode usar a propriedade overflow como scroll na div, e isso vai resolver o seu problema

igual esse exemplo aqui: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

 

a parte que te disse do ajax (para o q você quer) usando jquery fica super simples, uma linha que você pode colocar no onclick ou no proprio href dos links

do seu menu, tem um exemplo aqui:

 

http://api.jquery.com/load/

 

[]'s espero ter ajudado

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