Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tatiana Frambach
Tatiana Frambach
7,791 Points

my bootstrap container is on top of the other

I'm developing a homepage that has, so far, 2 bootstrap containers. What happens is, the second one is appearing on top of the first, instead of after it. I think i'm doing something wrong in the css, but can't figure what it is.

   <!-- hero cover -->
<div class="container-fluid hero-cover">

  <img src="images/cover-odonto.jpg" class="img-responsive">

  <div class="row">
    <div class="col-md-12 cover-text">
        <h1>Some Text</h1>
        <h3> Some secondary text</h3>
    </div> <!-- / col -->
  </div>  <!-- / row -->

    <!-- pricing tables -->
    <div class="row">
          <div class="col-md-5 col-md-offset-1 col-sm-6">
            <ul class="price">
              <li></li>
              <li></li>      
            </ul>
          </div> <!-- / col -->

          <div class="col-md-5 col-sm-6">
            <ul class="price">
              <li></li>
              <li></li>             
            </ul>
          </div> <!-- / col -->
    </div><!-- / row -->

 </div> <!-- / container -->


<!-- beneficios -->

<div class="container beneficios-table">

  <div class="row">
    <div class="col-sm-12">
      <p><h2>Some title here</h2></p>
    </div> <!-- / col -->
  </div> <!-- / row -->

  <div class="row">
    <div class="col-sm-12">
      <p><h3>Another Title</h3></p>
      <p><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></p>
    </div> <!-- / col -->
  </div> <!-- / row -->

</div> <!-- / container -->

And the css for this part:

/* Cover --------------------- */

.hero-cover {
    position: relative;
} 

.cover-text {
    position: absolute;
    top: 10%;
    left:6%;
    bottom:0;
    right:0;
    height:100%;
    z-index: 1;
}

.text-white {
    color: #ffffff;
}


/* Pricing --------------------- */


/* Style the list */
.price {
    position: absolute;
    list-style-type: none;
    border: 1px solid #eee;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: white;
    right: 5px;
    left: 5px;
    top: -100px;
}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .price-header {
    background-color: orange;
    color: white;
    font-size: 25px;
}

/* List items */
.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}


/* Beneficios e Diferenciais --------------------- */

.beneficios-table {
    position:  relative;
    background-color: white;
    padding: 6rem;
    margin-top: 50rem;

}

To make it more clear, the first image is how it should be and the second is how it is right now:

https://s3.postimg.org/778izl2ar/should_be.png https://s4.postimg.org/x4595yk19/right_now.png

Thanks in advance!

2 Answers

Craig Watson
Craig Watson
27,930 Points

Hi,

I thought I would have a quick go at setting something up for you...

http://s.codepen.io/Craig-Watson/debug/RRdmpw

this uses the latest version of bootstrap.

Craig

Tatiana Frambach
Tatiana Frambach
7,791 Points

Craig Watson That's perfect!! Thank you so much!

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

Can do you have a working version of the code somewhere that you can link me to? For example, codepen or a treehouse workspace/snapshot?

If not dont worry it will just take a little longer to debug as I will set up a working version :)

Craig