www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] Drop Down items appear behind image on screen

  1. #1
    Join Date
    Jan 2008
    Posts
    13

    resolved [RESOLVED] Drop Down items appear behind image on screen

    I created a CSS drop down menu, but the images in the HTML interfere with the menu. The drop down items fall behind the image. If anyone can tell me how I can make the items appear over the image, it would be appreciated.

    It happens in IE and Chrome, but not in Firefox or Safari.

    Here is the link: http://turnkeyelite.com/menus. Mouse over All About SEO to see the drop down. It falls behind the video image.

    Thanks for any help!

  2. #2
    Join Date
    Dec 2011
    Posts
    74
    Hi,

    This should be related to z-index. Have you validated your markup?

  3. #3
    Join Date
    Jan 2008
    Posts
    13
    I thought z-index only works with CSS components? The CSS drop-down falls behind an image in HTML format using the <img src > tag.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    It's the menu drop-down content that needs to have a higher z-index applied to it... not the image.
    And remember, for z-indexing to work, the element must also have a declared position.
    More info here:
    http://www.w3schools.com/cssref/pr_pos_z-index.asp
    http://www.impressivewebs.com/a-deta...-css-property/
    Best wishes,
    Eye for Video

  5. #5
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    yep, z-index. Something like this:

    img
    {
    position:relative;
    z-index:1;
    }

    .nav_dropdown
    {
    position: relative;
    z-index: 2;
    }
    higher z-index = on top

  6. #6
    Join Date
    Jan 2008
    Posts
    13
    The image is not really an image, it is actually a youtube video. How would I declare that in the CSS. I can't use the standard rule for images e.g. background-image:url('paper.gif');

    http://turnkeyelite.com/menus

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    You don't need to apply any z-index to the image or the video... by default all HTML elements start out at z-index level 0.
    Just give your menu content a z-index higher than the default (z-index:10 for example).
    Start there..
    EfV

  8. #8
    Join Date
    Jun 2012
    Posts
    48
    Hello webphotogeek,

    You don't have to change anything at all in your css.

    Add &wmode=transparent to the youtube hyperlink and add wmode="Opaque" in the iframe tag, et voilą !

    your code
    Code:
    <iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0" frameborder="0" allowfullscreen></iframe>
    new code
    Code:
    <iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0&wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
    Regards,
    Coderunner

  9. #9
    Join Date
    Jan 2008
    Posts
    13
    That did it!

    Thank you!!!

  10. #10
    Join Date
    Jun 2012
    Posts
    48
    Hello webphotogeek

    You're welcome

    Is it possible to mark this topic as "Resolved".
    (menu bar above your nickname --> Thread Tools --> option: "Mark Thread Resolved")

  11. #11
    Join Date
    Jan 2008
    Posts
    13
    Sure

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles