I'm doing a CSS onMouseOver dropdown. Normally, I would absolutely position the dropdown that becomes visible on the onMouseOver event, but I cannot because all of the content is center aligned, and therefore the x position of the x, y will change based on the window size (y will not change). Do I use some sort of relative positioning instead? Any suggestions would be great. Thanks.
there are lot of ways to do ... it will be good idea if you post a code snippet ... then people can provide you good help
Okay, thanks. Here goes. <script src="findDOM.js"></script> //findDOM works, returns DOM of an object, additional arg of 1 means with style, no need to pay attention <script language="javascript"> //manages swapping in and out of visiblity of dropdown var hideit1="true"; var hideit2="true"; function swap_visibility(objID, num){ var domobj = findDOM(objID, 1); domobj.visibility = "visible"; if(num==1){ hideit1 ="false"; } if(num==2){ hideit2 ="false"; } } function reset_visible(objID, num){ var dom = findDOM(objID, 1); if (hideit1 == "false" || hideit2=="false"){ dom.visibility = "hidden"; } } </script> //Linked CSS, dropdown list object #DrunkDriving{ position: absolute; top: 114px; left: 176px; z-index: 2; visibility: hidden; } Calling html code <!--hidden html dropdown div referenced in style sheet--> <div id="DrunkDriving" onMouseover="swap_visibility('DrunkDriving', '2'); return true;" onMouseout= "reset_visible('DrunkDriving', '2'); return true;"> <table cellspacing="2" cellpadding="6" border="0" bgcolor="FFFFFF"> <tr> <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/criminallaw.html">Our Past Cases</a></td> </tr> <tr> <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/nhpenalties.asp">Penalties in NH</a></td> </tr> <tr> <td class="nav" onMouseover=" this.className='navbright'; return true;" onMouseout="this.className='nav'; return true;"><a class="nounderline" href="/mapenalties.asp">Penalties in MA</a></td> </tr> </table> </div> <!--body of html flow--> <body bgcolor="FFFFFF" marginheight="10" marginwidth="0" topmargin="10" leftmargin="0"> <center> <!--main controller table--> <table cellspacing="0" cellpadding="0" border="0"> .......unneccessary code ommited <!--cell that calls functions--> <td class="nav" onMouseover="this.className='navbright'; swap_visibility('DrunkDriving', '1'); return true;" onMouseout="this.className='nav'; reset_visible('DrunkDriving', '1'); return true;">Drunk Driving</td> As you can see, I have absolutely postioned the DrunkDriving object. This is fine for vertical as vertical distance from the top never changes. However, since it is a center aligned table, the horizontal postion of this object needs to change based on window size. So I either need a dynamic way to handle this, or someway to give it an offset based on the postion of the table itself, rather than give it an absolute screen offset. http://www.bowserlaw.com/index1.asp
I am already doing that. The problem, is that the horizontal position of the onMouseover div changes as the window size changes.