Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jun 2004
    Posts
    4
    Member #
    6207
    Hi all,
    i have a page with a top bar menu set up.
    when a user does a mouseover on each of the links in the menu, a submenu appears with links to different area's of my site.
    the way i have done this is by creating the pop up tables inside a DIV tag, used absolute positioning to make them appear under the right menu item, and then set their visibility to hidden.
    On the mouseover, a javascript function changes the visibility to visible and another one hides it when the user clicks off it.

    my problem is this:
    when i view the page in different screen resolutions the positioning is all out of whack. I'm know this is to do with the use of absolute positioning and i was wondering if there was another way around this problem?

    Thanks guys.

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Absolute positioning will work as long as it is implemented properly. The key thing is that you have it inside an already positioned element. This allows the element to use its parent element as a reference instead of using the browser window witch it does by default. So no matter where your top bar is located or what resolution you are using, as long as you have a modern browser it will appear correctly.

    For example. (I am 'assuming' you have a table set up as your top menu, and are you are using the style attribute to impliment your css styles since you are changing them with javascript. Even if you are doing it totally different, this is easy adapted to any situation.)
    HTML Code:
    <td style="position:relative;....">menu
    <div style="position:absolute; bottom:-80px; left: 0px; display:none; ">content,..<div>
    </td>
    You will notice the use of position:relative on the td that the div is inside of. And of course the bottom:-80px rule will adjust to match the total height of your <div> including padding and borders, if any.

    If you can post a link or your source I can be more specific to your situation.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com