Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb How to position a layer?

    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:
    Code:
    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:
    Code:
    position:relative...
    but had no success.

    What would you recomend?

    Thanks,
    Bostjan

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    use a percentage(%) or use some javascript to detect the users screen size and position it accoridingly.

    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #4
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •