CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapfrontend
Ryan Buck
Ryan Buck

Reputation: 47

Content overlapping in bootstrap

I am creating a website for my band with bootstrap. This is my first real attempt at developing websites properly. I'm having some trouble getting my elements to clear each other properly. I have included my github repo so that you can pull everything and check it out on your machine.

Every time I add new content to the page, the new content seems to slip just under the content above it. I don't know why it's doing this as they are block elements. Clear: both; doesn't seem to work and I don't want to be offsetting things with css properties like "top: 32px;"

Any help would be greatly appreciated.

Github Repo: https://github.com/Ominix/coldclockknockout

Here is the raw code in case you aren't on Github.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Coldclock Knockout</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>`

    <!--NAVBAR TOP============================================================-->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <!--This is the three bars that open the menu-->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--This is the first button on the left side of Navbar-->
          <a class="navbar-brand" href="index.html">Coldclock Knockout</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">News<span class="sr-only">(current)</span></a></li>
            <li><a href="MUSIC.html">MUSIC</a></li>
            <li><a href="store.html">Store</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <!--HERO IMAGE================================================================--> 


  <!-- Mobile hero -->

  <div id="mobleJumbotron" class="jumbotron">
    <img src="images/jumbotron.jpg" alt="cd release promo">
  </div>


  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="images/jumbotron.jpg" alt="cd release promo">
    </div>

    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (1).jpg" alt="Crowd Shot1">
    </div>


    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (10).jpg" alt="Robby and Ryan in blue">
    </div>

    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (49).jpg" alt="Ryan 1">
    </div>

    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (50).jpg" alt="Bryan 1">
    </div>


    <div class="item">
        <img src="images/Coldclock Knockout Local 662 (45).jpg" alt="Robby 1">
    </div>


    <div class="item">
      <img src="images/Coldclock Knockout Local 662 (48).jpg" alt="Crowd Shot2">
    </div>


  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>


  <div class="container-fluid mainContent">
    <div class="row">
      <div class="col-md-4">
        <h1>THIS IS CONTENT NOW</h1>
      </div>
    </div>
  </div>


  <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-inline">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#services">Services</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                    <p class="copyright text-muted small">Copyright &copy; Your Company 2014. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </footer>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

...and the CSS

html {
    height: 100%;
}

body {
    background-color: black;
    height: 100%;
}


/*================================================================================================

NAVIGATION  

================================================================================================*/



.active {
    border-bottom: 1px solid red;
}

.navbar-inverse .navbar-nav > .active > a{
    font-size: 1.25em;
}

#navigation {
    margin-bottom: 0px;
    border-radius: 0px;
}



/*================================================================================================

JUMBOTRON

================================================================================================*/





#myCarousel {
    top: 32px;
    height: 500px;
}

#myCarousel img {
    margin: 0 auto;
    height: 500px;
}

/* begin moblie banner*/

.jumbotron {
    margin: 0 auto;
    padding: 0;
}

.jumbotron img {
    margin: 0 auto;
    width: 100%;
}

#mobleJumbotron {
    display: none;
    width: 100%;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
    #myCarousel {
        display: none;
    }

    #mobleJumbotron {
        display: block;
    }
}



/*================================================================================================

    Main content on home page

================================================================================================*/





/*================================================================================================

    FOOTER

================================================================================================*/

I understand that I probably have quite a bit of unnecessary/redundant code in here. I'm a noob after all.

Any help would be appreciated.

Upvotes: 1

Views: 1158

Answers (1)

vanburen
vanburen

Reputation: 21663

Seems like the main problem is the top: 32px. You're using a fixed-navbar so you should add padding to your body tag so the content isn't covered by the nav. See the Dox

Working Example:

html {
  height: 100%;
}
body {
  background-color: black;
  height: 100%;
  padding-top: 50px;
}
.navbar-inverse .navbar-nav > .active > a {
  font-size: 1.25em;
  border-bottom: 1px solid red;
}
#navigation {
  border-radius: none;
}
#myCarousel img {
  max-height: 500px;
}
div.jumbotron {
  padding: 0;
}
div.jumbotron img {
  width: 100%;
}
#mobleJumbotron {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  #myCarousel {
    display: none;
  }
  #mobleJumbotron {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" id="navigation">
  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="index.html">Coldclock Knockout</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">News<span class="sr-only">(current)</span></a>
        </li>
        <li><a href="MUSIC.html">Music</a>
        </li>
        <li><a href="store.html">Store</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div id="mobleJumbotron" class="jumbotron">
  <img src="http://placehold.it/3000x750/54AEC7/fff?text=BANNER" alt="cd release promo">
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
  </ol>

  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="http://placehold.it/3000x750/397082/fff?text=SLIDE" alt="cd release promo">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/D63147/fff?text=SLIDE" alt="Crowd Shot1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/348535/fff?text=SLIDE" alt="Robby and Ryan in blue">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/4F74C4/fff?text=SLIDE" alt="Ryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/9E4639/fff?text=SLIDE" alt="Bryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/CF70C3/fff?text=SLIDE" alt="Robby 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/857B30/fff?text=SLIDE" alt="Crowd Shot2">
    </div>

  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

<div class="container-fluid text-center">
  <div class="row">
    <div class="col-md-12">
      <h1>THIS IS CONTENT NOW</h1>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#about">About</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <p class="copyright text-muted small">Copyright &copy; Your Company 2016. All Rights Reserved</p>
      </div>
    </div>
  </div>
</footer>

Upvotes: 2

Related Questions