Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Win a copy of
Resilient Oracle PL/SQL: Building Resilient Database Solutions for Continuous Operation
this week in the
JDBC and Relational Databases
forum!
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Liutauras Vilda
Ron McLeod
Jeanne Boyarsky
Paul Clapham
Sheriffs:
Junilu Lacar
Tim Cooke
Saloon Keepers:
Carey Brown
Stephan van Hulst
Tim Holloway
Peter Rooke
Himai Minh
Bartenders:
Piet Souris
Mikalai Zaikin
Forum:
HTML Pages with CSS and JavaScript
problem as menu show behind of flash~ pls help
wong mei mei
Greenhorn
Posts: 5
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
can anyone help me with this problem...now my problem is when i mouse over the menu...such as c n d...then dropdown menu is behind of the flash..how can i bring forward it?
[ November 10, 2004: Message edited by: wong mei mei ]
wong mei mei
Greenhorn
Posts: 5
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
this is the javascript code:
// JavaScript Document var menu; var main; function findPosX(obj) { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } function findHeightY(obj) { if (obj.offsetParent) { curheight = obj.offsetHeight } else if (obj.height) curtop = obj.height; return curheight; } function showMenu(menuID,mainID,level) { menu=document.getElementById(menuID); main=document.getElementById(mainID); menu.style.left = findPosX(main) + "px"; var topPosition = findPosY(main) + findHeightY(main); menu.style.top = topPosition + "px"; menu.style.visibility="visible"; } function hideMenu(menuID) { menu=document.getElementById(menuID); menu.style.visibility="hidden"; }
wong mei mei
Greenhorn
Posts: 5
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
css code
DIV.mainmenu { FONT-SIZE: 11px; PADDING-BOTTOM: 1px; MARGIN: 0px auto; PADDING-TOP: 2px;FONT-FAMILY: verdana,arial, sans-serif; BACKGROUND-COLOR: #FBCA21; TEXT-ALIGN: center; width:100% } DIV.mainmenu A { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 1px; COLOR: #000000; PADDING-TOP: 2px; TEXT-DECORATION: none; width:100% } DIV.mainmenu A:hover { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 1px; COLOR: #ffffff; PADDING-TOP: 2px; BACKGROUND-COLOR: #93C840; TEXT-DECORATION: none; width:100% } DIV.mainmenu A:active { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM:1px; COLOR: #ffffff; PADDING-TOP: 2px; BACKGROUND-COLOR: #93C840; TEXT-DECORATION: none; width:100% } DIV.menu { z-index:10px; BORDER-RIGHT: #FBCA21 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #FBCA21 1px solid; PADDING-LEFT: 0px; Z-INDEX: 1000; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: #FBCA21 1px solid; WIDTH: 160px; PADDING-TOP: 0px; BORDER-BOTTOM: #FBCA21 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #EBF4D7 } DIV.menu A { z-index:10px; BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 2px; BORDER-BOTTOM: medium none; FONT-FAMILY: verdana,arial,sans-serif } DIV.menu A:link { z-index:10px; COLOR: #000000; TEXT-DECORATION: none } DIV.menu A:visited { z-index:10px; COLOR: #000000; TEXT-DECORATION: none } DIV.menu A:hover { z-index:10px; COLOR: #ffffff; BACKGROUND-COLOR: 93C840 } DIV.menu A:active { z-index:10px; COLOR: #ffffff; BACKGROUND-COLOR: 93C840 } .content { FONT-SIZE: 11px; COLOR: #ffffff; TEXT-DECORATION: none;FONT-FAMILY: verdana, arial, helvetica; }
[ November 09, 2004: Message edited by: april april ]
[ November 09, 2004: Message edited by: april april ]
[ November 09, 2004: Message edited by: april april ]
wong mei mei
Greenhorn
Posts: 5
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
this is html : to avoid problem, i change the keyword "onmouseout" to "onmouseeout" which have another character "e" added
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="festival.css" type="text/css"> <SCRIPT language=javascript src="menu2.js"></SCRIPT> </head> <body> <table width="500" border="0" align="center" bgcolor="#FFFFFF"> <tr> <td width="720"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="FBCA21"> <td width="14%" height="16" bgcolor="FBCA21"><div align="center" class=mainmenu><A href="http://www.yahoo.com">Home</A></div></td> <td width="14%" bgcolor="FBCA21"> <div align="center" class=mainmenu><A href="http://www.yahoo.com">a</A></div></td> <td width="22%" bgcolor="FBCA21"><div align="center" class=mainmenu><A href="http://www.yahoo.com">b</A></div></td> <td width="22%" bgcolor="FBCA21"> <div align="center" class=mainmenu><A id=mainenglish onmouseover="showMenu('english','mainenglish','1')" onclick="this.blur();return false;" onmouseeout="hideMenu('english');" href="http://www.yahoo.com"> c</A></div></td> <td width="28%" bgcolor="FBCA21"> <div align="center" class=mainmenu><A id=mainmalay onmouseover="showMenu('malay','mainmalay','1')" onclick="this.blur();return false;" onmouseeout="hideMenu('malay');" href="http://www.yahoo.com">d</A> <div class=menu id=english onmouseover="showMenu('english', 'mainenglish','1')" onMouseeOut="hideMenu('english');"><a href="http://www.yahoo.com">yahoo</a> <a href="http://www.yahoo.com">yahoo</a> <a href="http://www.yahoo.com">yahoo</a> <a href="http://www.yahoo.com">yahoo</a> <a href="http://www.yahoo.com">yahoo</a> </div> <div class=menu id=malay onmouseover="showMenu('malay', 'mainmalay','1')" onMouseeOut="hideMenu('malay');"><a href="http://www.yahoo.com">bla bla bla</a> <a href="http://www.yahoo.com">bla bla bla</a> <a href="http://www.yahoo.com">bla bla bla</a> <a href="http://www.yahoo.com">bla bla bla</a> </div> </div></td> </tr> </table></td> </tr> <tr> <td height="121"> <object classid="clsid :mrgreen: 27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="100"> <param name="movie" value="image/testing.swf"> <param name="quality" value="high"> <embed src="image/testing.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="100"></embed></object> </td> </tr> </table> <p> </p> </body> </html>
[ November 09, 2004: Message edited by: april april ]
[ November 09, 2004: Message edited by: april april ]
wong mei mei
Greenhorn
Posts: 5
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
anyone can help ?
Eric Pascarello
author
Posts: 15385
6
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
As we said before
place a div around the flash
<div style="zIndex:0">FLASH</div>
In all of the menu css rules place z-Index = 101;
Eric
We find this kind of rampant individuality very disturbing. But not this tiny ad:
Master Gardener Program
https://coderanch.com/t/771761/Master-Gardener-Program
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Menu Z Order
Menu appears behind list bax
UnMarshalException - Nested ClassNotFoundException again
Menu Appears behind combo box in IE6.0
Menu problem
More...