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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layering problem!!

    hi ,
    I use e very simple way for creating my mouseover menu, that is using <div> tag and css. below is my code:


    function showMenu(id)
    {
    if(!supported)
    return;

    if (supported)
    obj = (dom) ? document.getElementById(id) : document.all(id)

    //the absolute position display differently in IE and Nestcape, so need to reposition
    if(dom2){


    obj.style.left=100
    obj.style.top = 555
    obj.style.visibility='visible';

    }

    obj.style.visibility='visible';



    }


    function hideMenu(id)
    {
    if(!supported)
    return;

    if (supported)
    obj = (dom) ? document.getElementById(id) : document.all(id)

    obj.style.visibility='hidden';
    }

    #ampmenu {position:absolute; margin-left:125px; margin-top:-244px; visibility:hidden}

    / I add an animation gif file here...
    <table></tr><td>
    <div id="ampmenu" onMouseOver=showMenu("ampmenu") onMouseOut=hideMenu("ampmenu")>
    Link1
    Link2
    Link3
    </div>
    </tr></td>



    Everything going well, except, when I change the height of the layout page, for instance add a small animation before the LINK (Link1, Link2 and Link3), the menu not display in the original posistion, I need to change the margin-top of the layer when the height of the layout is changed, WHY???????

    Please advice!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Possibly because you are using an absolute position

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ya, here's a quickie example about absolute/relative positioning. Let's assume the following html
    Code:
    <p>
        Hello World!
    </p>
    <p>
        Hello World!
    </p>
    <p>
        Hello World!
    </p>
    <div id="1">
        Div 1
        <div id="2">
            Div 2
        </div>
    </div>
    Now, for the first example, these styles
    Code:
    div#1 {
        width: 200px;
        height: 200px;
        }
    div#2 {
        position: absolute:
        left: 20px;
        top: 20px;
        width: 200px;
        height: 200px;
        }
    What does all this look like? Probably something like this
    Code:
    Hello World!
    
    Hello World!
          +------------------+
    Hello |Div 2             |
          |                  |
    +-----|                  |
    |Div 1|                  |
    |     |                  |
    |     |                  |
    |     |                  |
    |     |                  |
    |     |                  |
    |     +------------------+
    |                  |
    |                  |
    +------------------+
    Now, let's make one tiny change to the stylesheet
    Code:
    div#1 {
        position: relative;
        width: 200px;
        height: 200px;
        }
    What we get now? Something like this
    Code:
    Hello World!
    
    Hello World!
    
    Hello World!
    +------------------+
    |Div 1             |
    |                  |
    |     +------------------+
    |     |Div 2             |
    |     |                  |
    |     |                  |
    |     |                  |
    |     |                  |
    |     |                  |
    +-----|                  |
          |                  |
          |                  |
          +------------------+
    So, what does all this mean? If an HTML element is positioned absolutely, it gets its 0,0 coordinate by default from the BODY. Now, if that same HTML element has a parent element that is positions relatively OR absolutely, then it gets its 0,0 coordinate from THAT parent element.

    Make sense?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks!

    ok, thanks a lot, u give a very good example.....
    i will try to modify and see how.....

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    can't solve

    hi,

    if use relative, when the browser resize, then the position of the menu (left and right) out of the "Link". as below:

    Before the window resize

    Link 1 -------------------
    | |
    | menu |
    | |
    | |
    --------------------

    After resize, the menu will move to left or right.....
    Link 1
    -------------------
    | |
    | menu |
    | |
    | |
    --------------------

    Please advice!!

    If I can't solve the problem then will stick to my original simple way, modify the position value whenever I change the layout of the page. is that OK??

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It would be very difficult to say without seeing the styles and the HTML, but yes, it is perfectly fine to do it the original way until you have the knowledge to change it
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    New Coder
    Join Date
    Dec 2002
    Location
    Orlando
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    margins

    also, for good measure, make sure to set your page margins to 0 for all browsers...this will likely help with the problem.

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I am puzzled as to why you have margins of

    margin-left:125px;

    margin-top:-244px


  •  

    Posting Permissions

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