PopUp Menues - problems
Hello!I have a popupmenu that got position relative, I do not want it absolute because I will be able to use it as a component that is easy to add.
But the problem is that the table that got the menu has to big height. I just want it to be 20 px all the time.
You can try the code below and see for your self. The problem is that the green area should be just 20 px height all the time.
So if any one can help me!!
Best regards
Fredrik
<HTML>
<HEAD>
<STYLE>
.report
{
POSITION: relative;
WIDTH: 0px;
HEIGHT: 0px;
Z-INDEX: 2;
LEFT: 0px;
TOP: 10px;
BACKGROUND-COLOR: #FF0000;
LAYER-BACKGROUND-COLOR: #FFFFCC;
BORDER: 1px SOLID #333333;
OVERFLOW: HIDDEN;
VISIBILITY:HIDDEN
}
.analysis
{
POSITION: relative;
WIDTH: 0px;
HEIGHT: 0px;
Z-INDEX: 2;
LEFT: 0px;
TOP: 10px;
BACKGROUND-COLOR: #00FF00;
LAYER-BACKGROUND-COLOR: #FFFFCC;
BORDER: 1px SOLID #333333;
OVERFLOW: HIDDEN;
VISIBILITY:HIDDEN
}
.planning
{
POSITION: relative;
WIDTH: 0px;
HEIGHT: 0px;
Z-INDEX: 2;
LEFT: 0px;
TOP: 10px;
BACKGROUND-COLOR: #0000FF;
LAYER-BACKGROUND-COLOR: #FFFFCC;
BORDER: 1px SOLID #333333;
OVERFLOW: HIDDEN;
VISIBILITY:HIDDEN
}
.text_verdana_black_bold_10
{
FONT-FAMILY: verdana;
COLOR: black;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
}
.ahrefblack
{
FONT-FAMILY: verdana;
COLOR: black;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
.ahrefwhite
{
FONT-FAMILY: verdana;
COLOR: white;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</STYLE>
<SCRIPT TYPE="text/JScript.Encode">
var menus = new Array();
menus[0] = "report";
menus[1] = "analysis";
menus[2] = "planning";
function show(menu)
{
for(var i = 0; i < 3; i++)
{
if( menus[i] == menu )
{
document.all[menu].style.visibility='visible';
document.all[menu].style.width=110;
document.all[menu].style.height=100;
}
else
{
hide( menus[i] );
}
}
}
function hide(menu)
{
document.all[menu].style.visibility='hidden';
document.all[menu].style.width=0;
document.all[menu].style.height=0;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<TABLE BGCOLOR="#339933" HEIGHT="20" CELLSPACING=0 CELLPADDING=0 WIDTH="100%">
<TR HEIGHT="20">
<TD HEIGHT="20" VALIGN="TOP">
<A HREF="#" onMouseOver="show('report')" CLASS="ahrefwhite">Rapport</A>
<DIV ID="report" CLASS="report">
<TABLE>
<TR>
<TD>
<A CLASS="ahrefblack" TARGET="action" ID="Produkt" href="../servlet/ActionControllerServlet">Test1</A>
</TD>
</TR>
<TR>
<TD>
<A CLASS="ahrefblack" TARGET="action" ID="Enhet" href="../servlet/ActionControllerServlet">Test2</A>
</TD>
</TR>
<TR>
<TD>
<A CLASS="ahrefblack" TARGET="action" ID="Marknad" href="../servlet/ActionControllerServlet">Test3</A>
</TD>
</TR>
<TR>
<TD>
<A CLASS="ahrefblack" TARGET="action" ID="Tid" href="../servlet/ActionControllerServlet">Test4</A>
</TD>
</TR>
</TABLE>
</DIV>
</TD>
<TD HEIGHT="20" VALIGN="TOP">
<A HREF="#" onMouseOver="show('analysis')" CLASS="ahrefwhite">Analys</A>
<DIV ID="analysis" CLASS="analysis">
</DIV>
</TD>
<TD HEIGHT="20" VALIGN="TOP">
<A HREF="#" onMouseOver="show('planning')" CLASS="ahrefwhite">Planering</A>
<DIV ID="planning" CLASS="planning">
</DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD CLASS="text_verdana_black_bold_10">
The green area should be just 20 px height.
<BR>
Put the mouse over the links Report etc...
<BR>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
