How to position a layer?

bostjank

01-07-2003, 07:01 PM

Hi!

I have a web page with a simple navigation bar. When a user moves a mouse over a picture in navigation bar, a layer appears with "deeper" links. But I have a problem - how to position the layer, so that it appears directly bellow the picture? I tried: style="position:absolute; left:230; top:138; width:116; height:120; but it doesnt work, because my page (table) is centered in a browser, so that the left coordinate varies, depending on the size of browser's window.

I was also experimentig with:position:relative...but had no success.

What would you recomend?

Thanks,
Bostjan :thumbsup:

scroots

01-07-2003, 08:18 PM

use a percentage(%) or use some javascript to detect the users screen size and position it accoridingly.

scroots

pardicity3

01-07-2003, 11:29 PM

Yeah, I agree with scroots. I would use some javascript to position it. The gist of the script would be to determine the total width of the screen, divide that by two, then subtract whatever you need to in order to get the right positioning for the div.

I am not very good with this stuff, but I would imagine the script would look like this:
<head>
<script>
var width = screen.availWidth
var center = width/2
var myLeft = center - (your amount needed)
</script>
</head>

Then in your body tag do something like this:

<script>
document.write("<div style='position: absolute; left:" + myLeft + "; top: 138; width: 116; height: 120;'>")
</script>
(All your content in your div goes here)
</div>

That should do it I would imagine, just play aroud with the numbers a little bit and it should work out.

If it really concerns you though, you could always just position everything absolutley then you wouldn't run into these problems, but that can be a mess if it requires reformatting the code.

cg9com

01-08-2003, 06:28 AM

z-index will allow the div to float above all the elements regardless.
but i cant say its the best way to go, because i dunno about your menu.