CODEWITHSUNDEEP
htmlcss
Honest Objections
Honest Objections

Reputation: 883

css Hover keeps disappearing and going behind iframe?

I suppose I really have two questions(viewing the website might offer a better explanation):

The iframe on my website is staying in front of everything else, despite changing the z-index and setting the wmode to "transparent". I can't really find anything else about what might be causing it?

<div class="videoWrapper">
        <iframe position="absolute" width="100%" height="100%" src='http://www.pinkbike.com/v/embed/300624/?colors=ffae00' allowfullscreen wmode="transparent" frameborder='0'></iframe>
    </div>

CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 40%;
    margin-left:58%;
    margin-top:2%;
}

The other problem is that my sub menus keep disappearing, while you're hovered over them. I've again tried playing with the z-index to no avail.

<div id="menu_container">

<div class="menu_item" id="item_one">
    <a class="menu_item" href="#"><h3>Downhill</h3></a>
    <div class="sub_menu_item" id="item_one_sub">
        <h4>Gallery</h4>
        <h4>Example</h4>
        <h4>Example</h4>
    </div>
</div>
</div>

CSS for the menu: 

.menu_item {
  color:white;
  position:absoloute;
  height:3%;
  width:25%;
  text-decoration:none;
  text-align:center;
  margin-top:-20px;
  z-index:2;
  }

.sub_menu_item {
   background-color:black;
   display:none;
   position:absoloute;
   text-align:center;
   width:100%;
   z-index:5;
}

#menu_container {
    position:fixed;
    width:79%;
    min-width:500px;
    height:30px;
    background-color:orange;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
}

#item_one_sub {
    height:auto;
    margin-top:-20px;
    text-align:center;
}

#item_one:hover   #item_one_sub {
    display:block;
    z-index:100;
}

Any and all help is greatly appreciated!

Upvotes: 0

Views: 565

Answers (1)

Giorgio
Giorgio

Reputation: 1970

I think the following solution may solve both of your problems.

I've redesigned the layout, creating a wrapper to wrap both header and content 

.wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 80%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

and then arranged navigation menu (of course, you can still use your current solution, if you like it!)

<div class="navitem">
    <div class="title">Item one</div>
    <div class="submenu">
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
    </div>
</div>

I've also fixed some imprecisions about video wrapper

.videoWrapper {
    width:100%;
    display:block;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Fiddle

The navigation menu is now always on top, with a fixed position, and above video iframe.

Upvotes: 1

Related Questions