PDA

Click to See Complete Forum and Search --> : Position conflict

lucass
04-05-2010, 02:20 PM
Hi there,

I have a position conflict in my code which I could not solve. I built a horizontal mouse over menu which works perfectly if alone. The menu uses position:relative in order to correctly display the submenus when someone passes the mouse over it. However, I decided to add to one of my pages a image, that displays a menu once someone passes the mouse over it. As you can imagine, this latter feature also makes use of position:relative in order to correct display the menu.
Separately, they both work fine. The menu works as it should when I use position:absolute for the image - actually they both work fine in this situation, but the image-menu will appear in different positions depending on the user's screen resolution . However, once I use position:relative to the image, the menu simply stops working..
Clearly, there is a conflict between both features. I have no clue about how to solve it.
Does anyone have any idea about what is going on?

Many thanks
tirna
04-05-2010, 06:39 PM
Without seeing your code it is difficult for me to visualise exactly what you have.

Hopefully the quick interactive demo I set up below will help in showing how css positioning works.

I have a red parent div and a green child div.

The parent div can have position absolute or relative. The child div must have absolute positioning if you want it to be located at the same x, y coords relative to the parent div regardless of where you move the parent div.

You can play with the x, y coords of each div by using the text boxes to hopefully give you a feel for how css postioning can be used.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
#redDiv {
position: relative;
top: 50px;
left: 50px;
background-color: red;
width: 100px;
height: 100px}

#greenDiv {
position: absolute;
top: 35px;
left: 35px;
background-color: green;
width: 100px;
height: 100px}

#inputs {
position: absolute;
top: 350px;
left: 10px}
-->
</style>
<script type="text/javascript">
<!--
function moveDiv(elemId,coord) {
switch (elemId) {
case "greenX":
document.getElementById("greenDiv").style.left = coord+"px";
break;
case "greenY":
document.getElementById("greenDiv").style.top = coord+"px";
break;
case "redX":
document.getElementById("redDiv").style.left = coord+"px";
break;
case "redY":
document.getElementById("redDiv").style.top = coord+"px";
break;
}
}
//-->
</script>
</head>
<body>

<div id="redDiv">
Parent Div
<div id="greenDiv">Child Div</div>
</div>

<div id="inputs">
<table cellspacing="15">
<tr>
<td>Green X<br />Relative to parent</td><td><input type="text" id="greenX" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Green Y<br />Relative to parent</td><td><input type="text" id="greenY" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Red X<br />Relative to page</td><td><input type="text" id="redX" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Red Y<br />Relative to page</td><td><input type="text" id="redY" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
</table>

<p>The text boxes have onchange event handlers.</p>
</div>

</body>
</html>
lucass
04-06-2010, 03:35 PM
Tirna,
Your code helped me understand how the CSS position works - my div position was not right, I changed the div's order and it worked like a charm!!
I really appreciate your help.

Thank you.
tirna
04-06-2010, 11:36 PM
no problem - I'm glad you sorted it out :)