Can't click elements in my 'content' div

20 December 2015 - 1 answer

I have some text and a YouTube video on my website (aka: http://redstonegaming.com), and it won't let me start the video. Any help would be greatly appreciated. Also, when I set the content div to z-index: 99, it works but my dropdown menu goes under the content. Vice versa.

var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
  konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
  kkeys.push(e.keyCode);
  if (kkeys.toString().indexOf(konami) >= 0) {
    kkeys = []; // <-- Change here
    if (rick == false) {
      rick = true;
      audio.play();
    } else if (rick == true) {
      rick = false;
      audio.pause(); // <-- another issue
    }
  }
});

/*Some Fonts Here:*/
@font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
	font-family: Rusty;
	font-weight: Lighter;
}
.background
{
	background-image: url(0.jpg);
	background-attachment: fixed;
	background-size: 100% auto;
	background-color: f7f7f7;
	background-repeat: no-repeat;
	background-position:absolute;
}
.menubar {
  height: 2.8vw;
  opacity: 0.85;
  background-color: #CCCCCC;
}
.clearfix:after {
  display: block;
  clear: both;
}
.menu-wrap {
  width: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #3e3436;
}
.menu {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Ek Mukta';
}
.menu a {
  transition: all linear 0.15s;
  color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: rgba(189, 34, 34, 1);
}
.menu .arrow {
  font-size: 0.95vw;
  line-height: 0%;
}
.menu > ul > li {
  float: middle;
  display: inline-block;
  position: relative;
  font-size: 1.2vw;
}
.menu > ul > li > a {
  padding: 0.7vw 5vh;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
.menu li:hover .sub-menu {
  display: block;
  z-index: 99;
}
.sub-menu {
  width: 100%;
  padding: 0px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  display: none;
  transition: opacity linear 5.8s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 1.2vw;
}
.sub-menu li a {
  padding: 10px 10px;
  display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
  background: #3e3436;
}
.Rusty 
{
	font-family: "Rusty";
	color: rgba(189, 34, 34, 1);
}
.content
{
	opacity: .85;
	position: relative;
	margin: auto;
    width: 80%;
	z-index: -1; 
    background-color: #CCCCCC;
    padding: 10px;
	height: 100%;
}
.menu > ul > .login 
{
    position: absolute;
    top: 0;
    right: 0;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	width: 100%;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:15;
	left:15%;
	right:15%;
	width: 25vw;
	height:25vh;
}
.title
{
	text-align: center;
	font-size: 7vh;
	text-decoration: underline;
	-moz-text-decoration-color: inherit;
    text-decoration-color: inherit;
}
.feed-column
{
	width: 50%;
}
.text-center
{
	text-align: center;
}

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="style.css" />
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
    name="www-subscribe-widget" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="script.js"></script>
    <link rel="shortcut icon" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="favicon.ico" />
    <title>RG - Home</title>
  </head>
  <body class="background">
    <div class="menubar">
      <nav class="menu">
        <ul class="clearfix">
          <li>
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="aboutme.html">About Me 
            <span class="arrow">▼</span></a>
            <ul class="sub-menu">
              <li>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Gaming</a>
              </li>
              <li>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Programming</a>
              </li>
              <li>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">YouTube</a>
              </li>
              <li>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Other</a>
              </li>
            </ul>
          </li>
          <li>
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="schedule.html">Schedule</a>
          </li>
          <li class="current-item">
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">
              <p class="rusty">RedstoneGaming</p>
            </a>
          </li>
          <li>
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="equipment.html">Equipment</a>
          </li>
          <li>
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="contact.html">Contact Me</a>
          </li>
          <li class="login">
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="login.html">Login/Sign Up</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="rusty title">ThatRedstoneGuy&#39;s Feed</h1>
      <div class="feed-column">
        <h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
        <div class="video-container">
          <iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
        </div>
      </div>
      <div class="feed-column">
	  </div>
    </div>
  </body>
</html>

Answer

Your <body class="background"> is covering the .content div because you have z-index: -1; on the content class in your css file. You should be safe to just remove it, if not then change it to 1 and add z-index: 2; to your .menubar class.

You can see this in either Firefox or Chrome by using developer tools Inspect Element to see the layout of the page as it is rendered in the browser.

Firefox Inspect Element

Chrome Inspect Element

EDIT:

After playing around for a while I found a solution. The z-index has some relation that I don't completely understand with whether the position is static or relative/absolute. So after experimentation I was able to get the menu to work properly by adding position: relative; to the .menubar class.

source: stackoverflow.com

← Previous Post

Can't click elements in my 'content' div

20 December 2015 - 1 answer

Answer

Related Questions