PDA

View Full Version : CSS position problem



dizyn
Jan 20th, 2009, 10:34 AM
Hi

Please check http://living.morbidtraders.net/test/ if you click on "Bid Now" you see the menu opens at the end of both bid now links, I want to open it above both.

For example I click 1st bid now it should open it just under first link, instead opening it at bottom.

abduraooft
Jan 20th, 2009, 11:03 AM
I think it has been said many times from this forum about the issues of using tables for non tabular data. So make them to a properly nested ul-li list first.

dizyn
Jan 20th, 2009, 12:07 PM
converted, please now check it and help me out.

abduraooft
Jan 20th, 2009, 12:40 PM
Umm.. try

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>some title</title>
<script type="text/javascript">
var sel;
function show(obj){
//alert(obj.parentNode);
var ul=obj.parentNode.getElementsByTagName('ul');
if(sel)
sel.style.display='none';
sel=ul[0];
sel.style.display='block';

}
</script>
<style type="text/css">
ul#list li ul{
display:none;
}
</style>

</head>

<body>
<ul id="list">
<li><a href="#" onclick="show(this);">Bid now</a>
<ul>
<li ><a href="http://www.dizyn.com">Bid now1</a></li>
<li ><a href="http://www.google.com">View seller's other items1</a></li>
</ul>
</li>

<li><a href="#" onclick="show(this);">Bid now</a>
<ul>
<li ><a href="http://www.dizyn.com">Bid now2</a></li>
<li ><a href="http://www.google.com">View seller's other items2</a></li>
</ul>
</li>
</ul>
</body>
</html>

dizyn
Jan 20th, 2009, 01:20 PM
thanks but i want to open it in space, like if if click on first the menu should open above the ground like. I hope you understand this.

jerry62704
Jan 20th, 2009, 05:01 PM
Currently, you have a list followed by a hidden list. Is what you want to have happen is the list 1, item 1 get a click and below that and above list 1 item 2 the stuff in list 2 item 1 show up?

If so, could you move the list 2 stuff into the list 1 so you have:

List 1 Item 1: displayed
List 1 Item 2: hidden
List 1 Item 3: displayed
List 1 Item 4: hidden

and then unhide them on click via javascript as you are doing now? You would have to have unique ids for everything and pass in the originator click to the javascript so it would know which thing to unhide.

dizyn
Jan 21st, 2009, 07:29 AM
I want to open it in space like a menu, you see now it moves the 2nd row down i want to open it in space so that it don't move the 2nd row down.

hope you understand

abduraooft
Jan 21st, 2009, 07:49 AM
<style type="text/css">
#list li{
position:relative;
z-index:1;
}
#list li ul{
position:absolute;
left:0;
z-index:2;
}
ul#list li ul{
display:none;
}
</style>