[Resolvido] Menu Drop down aparece atrás de iframe com apresetaçã

Bruno_Ferreira · Dezembro 16, 2008

Bom dia amigos,

Estou com um problema meio antigo já e creio que alguns já devem conhecer.

Tenho uma página que consiste basicamente em uma barra horizontal com menus drop down e um iframe logo abaixo em que são carregados os conteúdos.

Os códigos são esses:

INDEX.HTM

<html>
	<head>
		<title>Portal</title>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<script src="script/script.js"></script>
	</head>
	<body>
		<!--logomarca-->
		<a href="index.htm"><img id="logo" src="img/logo.png" border=0></a>
		
		<!--frame de conteudo-->
		<iframe name="conteudo" id="conteudo" width="100%" height="80%" src="introducao.htm"></iframe>
		
		<!--tabela usada como menu-->
		<table class="menu" name="menu">
			<tr>
				<td onmouseover="showmenu('indicmovel')" onmouseout="hidemenu('indicmovel')" width="20%">
					Paginas HTML<br/>

										<!--TABELA DE SUBMENU-->
					<table class="submenu" id="indicmovel" width="190">
						<tr><td class="menu">
							<a href="construcao.htm" target="conteudo">Pagina 1</a>
						</td></tr>
						<tr><td class="menu">
							<a href="construcao.htm" target="conteudo">Pagina 2</a>
						</td></tr>
						</td></tr>
					</table>
				</td>
				<td onmouseover="showmenu('resultados')" onmouseout="hidemenu('resultados')" width="20%">
					Apresentaçães<br/>
										
										<!--TABELA DE SUBMENU-->
					<table class="submenu" id="resultados" width="190">
						<tr><td class="menu">
							<a href="include/apresentacoes/index.html" target="conteudo">DBA Chuck Norris</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/apresentacoes/index.pdf" target="conteudo">Apresentação pdf</a>
						</td></tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

SCRIPT.JS

//FUNÇÕES PARA MOSTRAR E ESCONDER SUBMENUS
function showmenu(elemento)
{
	//document.getElementById(elemento).style.visibility="visible";
	document.getElementById(elemento).style.display="block";
}
function hidemenu(elemento)
{
	//document.getElementById(elemento).style.visibility="hidden";
	document.getElementById(elemento).style.display="none";
}

STYLE.CSS

body{
	font-family: arial;
	background: #FFFFFF url("../img/background.png") repeat-x;
}

#logo{
	position: absolute;
	width: 100%;
	height:85;
	left:10;
	top:0;
}

table.menu{
	position: absolute;
	left: 10px;
	top: 85px;
	width: 100%;
	text-transform: uppercase;
	font-size: small;
}

td{
	background: url("../img/menu1.png");
	font-size: small;
	text-transform: uppercase;
}

td:hover{
	background-color: green;
	background: url("../img/menu2.png");
	color: grey;
}


//ESTILO APLICADO ÀS TABELAS DE SUBMENUS
table.submenu{
	display: none;
	position: absolute;
	font-size: small;
	z-index: 3;
}

td.submenu{
	position: relative;
}

iframe{
	position: absolute;
	left: 10px;
	top: 107px;
	width: 100%;
	background-color: silver;
}

a{
	font-family: arial, verdana;
	font-weight: normal;
	color: #555555;
}

Vocês também podem visualizar no endereco http://br.geocities.com/brunnete16/index.htm, o site é da empresa em que eu trabalho e confidencial portanto, eu mudei o conteúdo e ele está incompleto nesse endereço mas a idéia é aquela mesmo.

Notem que as páginas html aparecem normalmente atrás do submenu, mas as apresentações em flash e pdf aparecem na frente do submenu. Esse é meu grande problema, alguém sabe como posso resolver isso?

valeu!!! http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

William Bruno · Dezembro 16, 2008

Para o flash aceitar z-index, você precisa definir wmode transparent nele.

E procure usar um DOCTYPE para garantir uma melhor renderização dos browsers.

Bruno_Ferreira · Dezembro 16, 2008

Para o flash aceitar z-index, você precisa definir wmode transparent nele.

E procure usar um DOCTYPE para garantir uma melhor renderização dos browsers.

William,

Valeu pela dica, acontece que eu uso um aplicativo pra criar uma apresentação em flash a partir de um power point (AuthorPOINT Lite), e não programação direto em flash, não entendo muito de flash, mas tem como eu definir o wmode mesmo assim? se tem, me mostra como aí.

Valeu!!!

William Bruno · Dezembro 16, 2008

Tem cara... como é que você insere o objeto flash na página HTML?

Coloca esse código aqui... é nele que setamos o wmode.

tá usando object? embed ? SWFObject ?

Meio estranho esse código que você usou para inserir o FLash... mas olha, a idéia é mudar essa linha aqui:

'wmode', 'window',

para

'wmode', 'transparent',

Linha 177

Bruno_Ferreira · Dezembro 16, 2008

Tem cara... como é que você insere o objeto flash na página HTML?

Coloca esse código aqui... é nele que setamos o wmode.

tá usando object? embed ? SWFObject ?

Bem, vamos por partes, não sei exatamente o que é embed object e SWFObject não mas eis o seguinte, como deve ter visto, na verdade eu chamo uma página html para mostrar o flash e aparentemente (não entendo muito) o objeto flash está nessa página.

O código da página é meio confuso, mas é esse aí:

INDEX.HTM

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script>
function closeWindow(){
	// IE and Netscape refer to the movie object differently.
	// This function returns the appropriate syntax depending on the browser.
	if (navigator.appName.indexOf ("Microsoft") !=-1) {
		window.close(); 
	} else {
		window.open('','_parent','');
		window.close(); 
	}
		
}
</script>
<head>
<title>authorPOINT's flash presentation</title>

<style type=text/css>
		.tdstyle{
		border: 1px solid #8498CF;
		background-color: #ffffff;
		}
		
		.bodycolor{
		background-color: #e7efff;
		}
			
		body {
		margin-left: 0px;
		margin-right: 0px;
		}
		</style>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
  
  set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
  if (IsObject(swControl)) then
	swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
			  var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			descArray = flashDescription.split(" ");
			tempArrayMajor = descArray[2].split(".");
			versionMajor = tempArrayMajor[0];
			versionMinor = tempArrayMajor[1];
			if ( descArray[3] != "" ) {
				tempArrayMinor = descArray[3].split("r");
			} else {
				tempArrayMinor = descArray[4].split("r");
			}
			  versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
			flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
		  } else {
			flashVer = -1;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	// Can't detect in all other cases
	else {
		
		flashVer = -1;
	}
	return flashVer;
} 
// If called with no parameters this function returns a floating point value 
// which should be the version of the Flash Player or 0.0 
// ex: Flash Player 7r14 returns 7.14
// If called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) 
{
 	reqVer = parseFloat(reqMajorVer + "." + reqRevision);
   	// loop backwards through the versions until we find the newest version	
	for (i=25;i>0;i--) {	
		if (isIE && isWin && !isOpera) {
			versionStr = VBGetSwfVer(i);
		} else {
			versionStr = JSGetSwfVer(i);		
		}
		if (versionStr == -1 ) { 
			return false;
		} else if (versionStr != 0) {
			if(isIE && isWin && !isOpera) {
				tempArray		 = versionStr.split(" ");
				tempString		= tempArray[1];
				versionArray	  = tempString .split(",");				
			} else {
				versionArray	  = versionStr.split(".");
			}
			versionMajor	  = versionArray[0];
			versionMinor	  = versionArray[1];
			versionRevision   = versionArray[2];
			
			versionString	 = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
			versionNum		= parseFloat(versionString);
			// is the major.revision >= requested major.revision AND the minor version >= requested minor
			if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
				return true;
			} else {
				return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );	
			}
		}
	}	
	return (reqVer ? false : 0.0);
}
// -->
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" topmargin="0" scroll="no">

<script language="JavaScript" type="text/javascript">

if (AC_FL_RunContent == 0) 
	{
			alert("This page requires AC_RunActiveContent.js. In Flash, run \"Apply Active Content Update\" in the Commands menu to copy AC_RunActiveContent.js to the HTML output folder.");
	}
else 
{
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) 
	{
		
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'index',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'test',
			'bgcolor', '#ffffff',
			'name', 'test',
			'menu', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'index',
			'salign', ''
			); //end AC code
	}
	else 
	{  // flash is too old or we can't detect the plugin
		 var alternateContent = ' authorPOINT could not detect Flash player 8.0 in your Browser.'
			+ '<a href=http://www.macromedia.com/go/getflash/ target="_blank">Click here</a> to install.<br>'
			+ '<a href=index.html> Click here</a> to continue if Flash Player 8.0 is already installed. ';
				document.write('<body class="bodycolor">');
				document.write('<br><br><br><table border="0" width="650" align="center"  cellpadding="0" cellspacing="0" ID="Table1">');		
				document.write('<tr valign=middle>');
				document.write('<td class=tdstyle align=center width="100%" valign=middle>');
				document.write('<strong><font color=#003399 size=3>'+alternateContent+'</font></strong>');				
				document.write('</td>');
				document.write('</tr>');
				document.write('</table>');
				document.write('</body>');
	}
}
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
	<param name="movie" value="index.swf" /><param name="quality" value="high" />
	<param name="scale" value="showall" /><param name="bgcolor" value="#ffffff" />
   <embed src="index.swf" quality="high" scale="showall" bgcolor="#ffffff" width="100%" height="100%" 
   name="index" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain"
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
   </embed>
</object>
</noscript>

</body>
</html>

Se você puder me apontar onde eu altero...

Valeu!!!

William Bruno · Dezembro 16, 2008

Meio estranho esse código que você usou para inserir o FLash... mas olha, a idéia é mudar essa linha aqui:

'wmode', 'window',

para

'wmode', 'transparent',

Linha 177

Só fui ver depois o código da página HTML... tenta isso ai.

Editei o post, mas acho que o fórum foi meio lento..

Bruno_Ferreira · Dezembro 16, 2008

Meio estranho esse código que você usou para inserir o FLash... mas olha, a idéia é mudar essa linha aqui:

'wmode', 'window',

para

'wmode', 'transparent',

Linha 177

Só fui ver depois o código da página HTML... tenta isso ai.
Editei o post, mas acho que o fórum foi meio lento..

Funcionou cara!!!!!

Valeu William, Cê é demais!!!! hehehe http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Karlos Weber · Agosto 11, 2009

Boa tarde, estou tendo problema semelhante ao do colega, estou com um menu Drop down que quando clico em algumas páginas que contém Pdf, após isso todo o menu fica por trás do arquivo pdf, sendo que estou usando iframe no corpo do meio, aonde alguns arquivos abre neste lugar..por favor preciso de ajuda com Urgência.

Karlos Weber

Arquivado

[Resolvido] Menu Drop down aparece atrás de iframe com apresetaçã

Recommended Posts

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Karlos Weber 0

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