CODEWITHSUNDEEP
htmlcssthemes
Antonio Vallez
Antonio Vallez

Reputation: 35

What am i going wrong on my theme? div hide behinds another div

Before i explain, here are the links.

Theme: https://nerdietony.github.io/Smash-Battles-WebPage/ Source: https://github.com/Nerdietony/Smash-Battles-WebPage/

The problem is that the smash id is hiding behind the logobg id. I've made so many commits today, that i don't even know how this became a problem nor how to fix it. IT shouldn't be hiding behind it but goes right under it. What am i doing wrong?

Html: 

<html>
<head>
  <title>Smash Battles</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="content">
    <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Dev Blog</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Characters</a></li>
  <li style="float:right"><a href="#">Join Now</a></li>
  <li style="float:right"><a href="#">Login</a></li>
</ul>
     <div id="logobg"><div id="logo"></div></div>
    <div class="smash">
    <br>
      <div id="content">
      <div class="pageheader">Welcome to Smash Battles!!!</div>
      <p>Smash Battles? Isn't that some modded version of smash. No, we ain't that cool but we have something else to offer, something fun and new for the dimension of discordapp!</p>
      <div class="pageheader">What is Smash Battles?</div>
      <p>From the people who brought you nothing that you will know, comes a new and awesome bot game just for you and your server. I welcome you, Smash Battles Bot. What is this wonderful bot, you may ask? Well, it's a turn based simulator game that allows you to pick a character and fight other users for Taunts which allows you to unlock new features/characters. The bot has a lot to offer and has huge plans for the future. So, add this bot now! You won't be disappointed.</p>
      </div>
    <div id="sidebar">
      <div class="pageheader">Shortcuts</div>
      <br><br>
      <center><div class="btn"><a href="https://discordapp.com/oauth2/authorize?permissions=27649&client_id=274620011744854029&scope=bot">Add your bot</a></div></center>
      </div></div>
     <div class="footer"><p>@Smash Battles - 2017</p></div></div>

      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
  <script>
  //Add your images, we'll set the path in the next step
      var images = ['logo.png', 'logo1.png'];

  //Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
      $('<img class="fade-in" src="' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#logo');
  </script>
</body>
</html>

Css: 

@import url('https://fonts.googleapis.com/css?family=Catamaran');

.content {
  background-color: #fff;
  font-family: 'Catamaran', sans-serif;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

#logobg {
  background: url("bk.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 500px;
  width: 100%;
  position: fixed;
}

#logo {
  text-align: center;
  margin: auto;
  margin-top: 150px;
}

#logo:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.footer {
    background-color: #333;
    height: auto;
    width: 100%;
}

.footer p {
  font-size: 28px;
  font-family: 'Catamaran', sans-serif;
  text-align: center;
  color: #fff;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: static;
    top: 0;
    left: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Catamaran', sans-serif;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #CB0000;
}

p {
  font-family: 'Catamaran', sans-serif;
  font-size: 18px;
  color: #464646;
  text-align: center;
  padding: 20px;
}

.pageheader {
  font-family: 'Catamaran', sans-serif;
  font-size: 40px;
  color: #464646;
  display: inline-block;
  border-bottom: 1px solid #464646;
}
.ok img{
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.smash {
  text-align: center;
  display: table;
}
#sidebar {
    min-width: 400px;
    display: table-cell;
}

#content {
    display: table-cell;
    width: 100%;
}
.ok img:hover{
  opacity: 0.7
}
#sidebar img{
  opacity: 1;
}

Upvotes: 0

Views: 64

Answers (3)

Mers
Mers

Reputation: 734

Here is my understanding of what you're trying to accomplish: you need the 'smash' div to appear below your logobg id, correct? If so, your logobgid has the fixed position and its height is set to 500px. This means that logobg has been taken out of the normal flow and elements below it are moved to the top of the page.

To get your 'smash' div below your logobg id, you need to move the 'smash' div 500px from the top: you need to set margin-top: 500px to your 'smash' div: this will place your 'smash' div below the logobg id. 

.smash {
    text-align: center;
    display: table;
    margin-top: 500px;
}

enter image description here

Upvotes: 1

mlegg
mlegg

Reputation: 832

You need to also fix your html code, you have it started with but you need a DOCTYPE above that, use <!DOCTYPE html> at line 28 you have <center> that is obsolete, use css instead like this <div class="btn" style="text-align:center;>

I put that css inline because I don't know if you are using btn anywhere else, if you're not then you can add text-align:center; to the btn class in your css sheet.

Upvotes: 0

Joseph Sible-Reinstate Monica
Joseph Sible-Reinstate Monica

Reputation: 48592

Currently, you have everything with a z-index of -1 because of the content div. Give #logobg a lower z-index, like -2, and it will move behind your other elements instead of covering them up.

Upvotes: 0

Related Questions