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 6 of 6

Thread: Layers?

  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Layers?

    I have a page with an image on it. I also have a vertical menu bar that I would like to place over the image. After correctly positioning the menu, it all but disappeared behind the image. I've tried everything, but nothing seems to work. Any suggestions

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Maybe a silly question, but did you try with the z-index CSS property? Let's see your problem.

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Hi koyama,
    The page is here -
    http://moderntimes.com/tmp
    I'm not sure about the z-axis because I would have to add #masthead, wouldn't I? As you can see some of the menu is showing through, though, it doesn't work properly.

    Thanks,

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    It displays in my browser.

    You need to clarify what you mean by not working properly. How it is intended to work?

    If not working properly refers to the vibration effect you see on hover then that is because you have the text shifting over so far on hover that it no longer is being hovered by the cursor. So it returns to its original position only to find that your mouse is hovering again so in effect you get a sideways ping-pong of text.

    Try to have the text move only slightly over.

    Also you failed validation.

    -trigger

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Alright, I finally see your problem. The menu goes behind the picture, but it doesn't follow the edge of the image either as you shrink the window.

    In your case I would prefer doing absolute positioning for your menu. Did you consider that?

    1. Put back in your #wrapper which you already have the style for. It has position: relative so that's fine. It should be nested directly within the body element of course.

    2. Try to set for your #navcontainer
    #navcontainer
    {
    position: absolute;
    top: 0;
    right: 0;
    font-family: georgia, serif;
    font-size: 13px;
    text-align: center;
    text-transform: 0;
    }
    Your menu will go on top of the image and it will also follow the right edge when shrinking the window.

    This will definitely alter other things on your page, but this is just a matter of adjusting parameters. Actually, there is no need to slice the image anymore.

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    That's it koyama, it works. Many thanks.
    Michael


  •  

    Posting Permissions

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