...

View Full Version : layering problem!!



charon
01-14-2003, 08:17 AM
hi ,
I use e very simple way for creating my mouseover menu, that is using <div> tag and css. below is my code:


function showMenu(id)
{
if(!supported)
return;

if (supported)
obj = (dom) ? document.getElementById(id) : document.all(id)

//the absolute position display differently in IE and Nestcape, so need to reposition
if(dom2){


obj.style.left=100
obj.style.top = 555
obj.style.visibility='visible';

}

obj.style.visibility='visible';



}


function hideMenu(id)
{
if(!supported)
return;

if (supported)
obj = (dom) ? document.getElementById(id) : document.all(id)

obj.style.visibility='hidden';
}

#ampmenu {position:absolute; margin-left:125px; margin-top:-244px; visibility:hidden}

/ I add an animation gif file here...
<table></tr><td>
<div id="ampmenu" onMouseOver=showMenu("ampmenu") onMouseOut=hideMenu("ampmenu")>
Link1
Link2
Link3
</div>
</tr></td>



Everything going well, except, when I change the height of the layout page, for instance add a small animation before the LINK (Link1, Link2 and Link3), the menu not display in the original posistion, I need to change the margin-top of the layer when the height of the layout is changed, WHY???????

Please advice!

Mr J
01-14-2003, 10:19 PM
Possibly because you are using an absolute position

beetle
01-14-2003, 11:08 PM
ya, here's a quickie example about absolute/relative positioning. Let's assume the following html
<p>
Hello World!
</p>
<p>
Hello World!
</p>
<p>
Hello World!
</p>
<div id="1">
Div 1
<div id="2">
Div 2
</div>
</div>Now, for the first example, these styles
div#1 {
width: 200px;
height: 200px;
}
div#2 {
position: absolute:
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}What does all this look like? Probably something like this
Hello World!

Hello World!
+------------------+
Hello |Div 2 |
| |
+-----| |
|Div 1| |
| | |
| | |
| | |
| | |
| | |
| +------------------+
| |
| |
+------------------+Now, let's make one tiny change to the stylesheet
div#1 {
position: relative;
width: 200px;
height: 200px;
}What we get now? Something like this
Hello World!

Hello World!

Hello World!
+------------------+
|Div 1 |
| |
| +------------------+
| |Div 2 |
| | |
| | |
| | |
| | |
| | |
+-----| |
| |
| |
+------------------+So, what does all this mean? If an HTML element is positioned absolutely, it gets its 0,0 coordinate by default from the BODY. Now, if that same HTML element has a parent element that is positions relatively OR absolutely, then it gets its 0,0 coordinate from THAT parent element.

Make sense?

charon
01-15-2003, 05:26 AM
ok, thanks a lot, u give a very good example.....
i will try to modify and see how.....

charon
01-15-2003, 05:38 AM
hi,

if use relative, when the browser resize, then the position of the menu (left and right) out of the "Link". as below:

Before the window resize

Link 1 -------------------
| |
| menu |
| |
| |
--------------------

After resize, the menu will move to left or right.....
Link 1
-------------------
| |
| menu |
| |
| |
--------------------

Please advice!!

If I can't solve the problem then will stick to my original simple way, modify the position value whenever I change the layout of the page. is that OK??

beetle
01-15-2003, 05:46 AM
It would be very difficult to say without seeing the styles and the HTML, but yes, it is perfectly fine to do it the original way until you have the knowledge to change it :D

mgersting
01-15-2003, 08:48 AM
also, for good measure, make sure to set your page margins to 0 for all browsers...this will likely help with the problem.

Mr J
01-15-2003, 06:35 PM
I am puzzled as to why you have margins of

margin-left:125px;

margin-top:-244px



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum