Banner flutuante atras de iframe...

tiujhou · Setembro 5, 2010

eh o seguinte eu havia postado uma duvida semelhante, pois tenho um banner flutuante no bloge ele estava sobrepondo os arquivos swf... consegui resolver.. mas agora estou com outro problema... como que faço para esse banner ficar na frente de um iframe... o codigo eh este...

<div align="left">
<iframe src ="http://dll10.com/wp-content/themes/tema/images/tedio/tedio.html" width="932" height="198" frameborder="0"  scrolling="no" ></iframe>
 </div>

Meu banner o código eh este..

<style type="text/css">
#topbar
{   
         style="z-index: -1"
	PADDING-TOP: 5px;
	PADDING-BOTTOM: 5px;
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px;
	VISIBILITY: hidden;
	BORDER-TOP: black 1px solid;
	BORDER-BOTTOM: black 1px solid;
	BORDER-RIGHT: black 1px solid;
	BORDER-LEFT: black 1px solid;
	WIDTH: 350px;
        color: black;
        
	FONT-FAMILY: Tahoma;
	POSITION: absolute;
	BACKGROUND-COLOR: white
}
</style>

<script type="text/javascript">
var persistclose = 1
var startX = 10
var startY = 20
var verticalpos = "frombottom"

function iecompattest()
{
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name)
{
	var search = Name + "="
	var returnvalue = "";
	if (document.cookie.length > 0)
	{
		offset = document.cookie.indexOf(search)
		if (offset != -1)
		{
			offset += search.length
			end = document.cookie.indexOf(";", offset);
			if (end == -1) end = document.cookie.length;
			returnvalue=unescape(document.cookie.substring(offset, end))
		}
	}
	return returnvalue;
}

function closebar()
{
	if (persistclose)
	document.cookie="remainclosed=1"
	document.getElementById("topbar").style.visibility="hidden"
}

function staticbar()
{
	barheight=document.getElementById("topbar").offsetHeight
	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
	var d = document;
	function ml(id)
	{
		var el=d.getElementById(id);
		if (!persistclose || persistclose && get_cookie("remainclosed")=="")
		el.style.visibility="visible"
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
		el.x = startX;
		if (verticalpos=="fromtop")
			el.y = startY;
		else
		{
			el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
			el.y -= startY;
		}
		return el;
	}
	
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop")
		{
			var pY = ns ? pageYOffset : iecompattest().scrollTop;
			ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else
		{
			var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
			ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("topbar");
	stayTopLeft();
}

if (window.addEventListener)
	window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
	window.attachEvent("onload", staticbar)
else if (document.getElementById)
	window.onload=staticbar
</script>


<div id="topbar">

	<table width="100%" align="left"  background="http://dll10.com/wp-content/themes/tema/images/popup.jpg">

		<tr>
			<td width="100%" align="center">

<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Dll10&loc=pt_BR" onclick="javascript:urchinTracker('/outbound/feedburner.google.com/fb/a/mailverify?uri=Facildebaixarcom');">

<img border="0" vspace="4" align="left" title="Clique aqui para assinar agora e receba em seu email aplicativos testados e livre de virus!" height="48" src="http://dll10.com/wp-content/themes/tema/images/feed.png" hspace="4" width="48"/></a>  
		<b>Fique Sempre Atualizado ! Cadastre-se:  E Receba as Novidades do Site em seu e-mail.</b><form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=Dll10&loc=pt_BR" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Dll10&loc=pt_BR', 'popupwindow', 'scrollbars=yes,width=520,height=500');return true">
          <input id="subbox" onfocus="if (this.value == 'Digite seu e-mail...') {this.value = '';}" value="Digite seu e-mail..." name="email" onblur="if (this.value == '') {this.value = 'Digite seu e-mail...';}" size="35" type="text" style="color: #000000; font-family: Tahoma; font-size: 9pt; border: 1px solid #000000; background-color: #FFFFFF"/><input value="dgemg" name="uri" type="hidden"/><input value="pt_BR" name="loc" type="hidden"/> <input id="subbutton" input class="button primary" value="Assinar" type="submit" style="color: #000000; font-family: Tahoma; font-size: 9pt; border: 1px solid #000000; background-color: #FFFFFF"/></form>


		
</td><td width="1%"><a href="javascript:closebar();">
<img border="0" style="float: left" width="16" src="http://i237.photobucket.com/albums/ff260/dgemg/close.gif" height="16" title="Fechar janela"/></a>
					</td>
		</tr>
<tr><td>
<br/>


<center><a href="http://feeds.feedburner.com/Dll10"><img src="http://feeds.feedburner.com/~fc/Dll10?bg=dcdcdc&fg=000000&anim=1" height="26" width="88" style="border:0" alt="" /></a></center> 

</td></tr>

	</table></div>

gostaria de deixar esse banner flutuante aparecendo na frente do iframe... no caso você encontra esse problema aq... www.dll10.com

Sylvio Leonel · Setembro 5, 2010

aqui deu certo...

ficou pro cima do frame...

mas se ainda não estiver dado certo aí, colaca o z-index: 0 para o <div id="topbar"> e z-index: 1 para o <div align="left"> do iframe

tiujhou · Setembro 6, 2010

aqui deu certo...

ficou pro cima do frame...

mas se ainda não estiver dado certo aí, colaca o z-index: 0 para o <div id="topbar"> e z-index: 1 para o <div align="left"> do iframe

Cara eu tentei e deu errado, talves tenha sido algo de errado que fiz!! pois naum entendo muito bem de programação!!

Eu coloquei o z-index dessa maneira no frame...

<div align="left" style="z-index: 1">

testei com outros numeros e naum deu certo!!!

Algo que achei interessante foi que meu menu horizontal, tambem ficava por cima do banner flutuante, no caso eu fiz as modificações inserindo z-index no menu e consegui fazer com que ele ficasse atras, mais o mais interessante que eu inseri z-index:500 e continuou atras, só deu certo quando eu inseri z-index:1000 ...

mas no caso do iframe naum deucerto!!! você falou que com você deu certo... talves isso tenha acontecido pois você usou o Firefox, pois ele eh o unico que o flash naum soprepoe...!!!

milisystem · Setembro 6, 2010

cara faz o seguinte, você sabe como funciona a propriedade z-index? Se não, dê uma estudadinha rápida apenas para saber como funciona.

No caso aí, você vai precisar definir z-index para a div do banner flutuante por exemplo z-index:1 e o seu iframe deverá estar com z-index:0, assim como foi citado pelo Sylvio.

Talvez você não tenha entendido muito bem, dê uma olhada nesse link

Usando z-index

Evandro Oliveira · Setembro 6, 2010

Acho que antes de estudar qualquer propriedade CSS, deve estudar o uso de CSS em si.

Isso aqui, por exemplo, não existe!!

<style type="text/css">
#topbar
{   
         style="z-index: -1"

milisystem · Setembro 6, 2010

Acho que antes de estudar qualquer propriedade CSS, deve estudar o uso de CSS em si.

Isso aqui, por exemplo, não existe!!
<style type="text/css">
#topbar
{   
         style="z-index: -1"

Verdade, se usa o style="" apenas quando o stilo está inline e no seu caso não está

deveria usar apenas

z-index: 1;

^_^

tiujhou · Setembro 8, 2010

Acho que antes de estudar qualquer propriedade CSS, deve estudar o uso de CSS em si.

Isso aqui, por exemplo, não existe!!
<style type="text/css">
#topbar
{   
         style="z-index: -1"
Verdade, se usa o style="" apenas quando o stilo está inline e no seu caso não está

deveria usar apenas
z-index: 1;
^_^

Eh isso foi um erro meu na hora de inserir o codigo para fazer a pergunta

<style type="text/css">
#topbar
{   
         style="z-index: -1"

pois como eu havia falado em uma resposta que digo que inseri no banner flutuante z-index: 500 e ele ficou atras do menu que tenho no topo, aí quando eu inseri z-index:1000 que ele passou na frente do menu, tipo eu jah tinha feito da maneira certa, só o código que eu havia passado errado...

Mas tipo, eu naum consegui fazer o banner flutuante ficar na frente do banner em flash...

como eu falei eu inseri no banner flutuante

z-index:1

e no iframe

<div style="z-index: 0">

No qual essa eh minha maior duvida eu posso inserir dessa maneira o codigo no Iframe??

Aí no caso, eu apaguei aquele banner em flash, e fiz outro, pois o velho eu havia publicado em html para inserir no iframe... aí este novo eu publiquei em swf... mais quando eu fui inserir no blog ele não carregava...ficava dessa maneira... Imagem Postada

Como vcs podem ver, eu naum entendi ele não carregava nem a pau ficava apenas dessa maneira!!!

testei varios códigos para inserir swf e nenhum dava certo... mas o que mais estranha é que se vcs entrarem nesse link http://dll10.com/wp-content/themes/tema/images/banner/galeria.swf ele funciona perfeitamente, mais quando eu insiro no blog ele num carrega e fica travado igual a imagem acima...

Aí eu inseri em um iframe o código, pois naum estava funcionando da maneira que sempre faço para inserir arquivos swf...

o iframe ficou assim...

<div style="z-index: -1">
<iframe src ="http://dll10.com/wp-content/themes/tema/images/banner/galeria.swf" width="941" height="320"  frameborder="0"  scrolling="no" > ></iframe>
 </div>

mas como sempre o banner flutuante ficou atras do arquivo flash...

Aí a maneira que encontrei para resolver esse problemas foi esta...

eu criei um arquivo .html , inseri esse código dentro..

<div  align="left">
<embed src="http://dll10.com/wp-content/themes/tema/images/banner/testes1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="941" height="320" wmode="transparent"></embed>
</div>

Aí hospedei, e fui e criei um iframe dessa maneira e inseri no codigo do meu blog....

<div style="z-index: -1">
<iframe src ="http://dll10.com/wp-content/themes/tema/images/banner/teste.html" width="941" height="320"  frameborder="0"  scrolling="no" > ></iframe>
 </div>

Aí sim, dessa maneira eu consegui inserir o arquivo flash e meu banner flutuante fica na frente dele... foi dessa maneira que consegui "resolver partes dos meus problemas", pois acabei criando outros... pois tive que fazer que os links no flash abrissem em outra pagina em branco, pois se não eles carregavam dentro do iframe... e outro problema que tive foi que como eu havia feito um topico aq no forum http://forum.imasters.com.br/index.php?/topic/403111-slides-nao-ficam-com-margin-0/page__p__1580088__fromsearch__1entry1580088 a respoito de alinhar meu 1º banner, pois ele ficava sempre a direita, esse aconteceu a mesma coisa, eu não consigo nem a pau, retirar um espaço em branco que existe a esquerda e a direita dele... mais pra mim tah resolvido minha pergunta!! VLW...

Evandro Oliveira · Setembro 8, 2010

Para elementos incorporados respeitarem z-index, devem ter seus planos de fundo transparentes.

Para elementos em flash, você adiciona o parâmetro

<param name="wmode" value="transparent">

Para páginas incporporadas, o css da página deve ter a seguinte propriedade

body { background: transparent; }

Sugiro que, se não for possível fazer com linguagem server-side, utilize <object>'s para incluir páginas ao invés de iframes.

tiujhou · Setembro 9, 2010

Para elementos incorporados respeitarem z-index, devem ter seus planos de fundo transparentes.

Para elementos em flash, você adiciona o parâmetro
<param name="wmode" value="transparent">
Para páginas incporporadas, o css da página deve ter a seguinte propriedade
body { background: transparent; }
Sugiro que, se não for possível fazer com linguagem server-side, utilize <object>'s para incluir páginas ao invés de iframes.

Cara funcionou entre "", pois eu fiz o que você flw, utilizei <object>,coloquei

<param name="wmode" value="transparent">

o banner ficou na frente do swf, mas como eu havia dito em uma resposta, no qual quando insiro o .swf direto ele trava fica igual essa img... Imagem Postada

Aí num adianta, toda fez que vou inserir o .swf direto, ele trava, mas quando eu entro direto no link do swf ele funciona normalmente.... http://dll10.com/wp-content/themes/tema/images/banner/galeria.swf

então a unica escolha que tenho eh deixar no iframe msm... flws..

Evandro Oliveira · Setembro 9, 2010

Configure o elemento .swf para procurar as imagens a partir do diretório raiz.

O que era assim: "imagem1.jpg" fica "/wp-content/themes/tema/images/banner/imagem1.jpg"

Movi o tópico para a área mais adequada.

Arquivado

Banner flutuante atras de iframe...

Recommended Posts

tiujhou 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sylvio Leonel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiujhou 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

milisystem 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

milisystem 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiujhou 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiujhou 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante