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 Antoine Eripret
Antoine Eripret
7,156 Points

Content starting again at the top of a page after the first <div>

Hi guys, does someone will have the solution for the problem I am facing for a while... I started a website using Boostrap framework, created a Navbar and a Jumbotron with a background and some text. So far so good but when I'm adding more content, after closing the jumbotron <div>, it starts again from the top and I really don't know why...

My code:

HTML: 

<nav role="navigation">
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand text-muted" href="#">Antoine Eripret</a>
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Présentation</a>
                    </li>
                    <li><a href="#">Profil</a>
                    </li>
                    <li><a href="#">Expérience</a>
                    </li>
                    <li><a href="#">Competences</a>
                    </li>
                    <li><a href="#">Contact</a>
                    </li>
                </ul>

            </div>
        </div>

    </nav>

    <!-- ------------Présentation ---------------------------->
    <div class="jumbotron">
        <div class="container">
            <h1 class="leadtext" style="color:white;">Antoine Eripret - Étudiant IÉSEG</h1>
            <br>
            <br>
            <h2>Site perso</h2>
        </div>
    </div>

    <!-- --------------Profil ------------------------------------->
<h1> This text starts at the top of the page, under the navbar! </h1>
</body>

</html>

Customized CSS (the default Bootstrap CSS is also used)

.jumbotron {

    background: url(../img/01._Panorama_de_Lyon_pris_depuis_le_toit_de_la_Basilique_de_Fourvi%C3%A8re.jpg) no-repeat center fixed;

    background-size: cover;

    position: absolute;

    margin-top: 30px;

    text-align: center;

    height: 100%;

    width: 100%;

}


.leadtext {

    display: inline-block;

    background-color: black;

    color: white;

    padding: 10px 15px;

}

I'm pretty sure it's a stupid mistake I made but I can't find where so if you guys could help me, I would really appreciate it.

2 Answers

Hugo Paz
Hugo Paz
15,622 Points

Hi Antoine,

Looking at your CSS it looks like position:absolute on the jumbotron might be the culprit.

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the html element itself meaning it will be placed relatively to the page itself.

The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.

Antoine Eripret
Antoine Eripret
7,156 Points
Antoine Eripret
Antoine Eripret
7,156 Points

I knew this was something stupid. Thanks a lot Hugo. Nevertheless, I have another question for you: I used the position:absolute so that my jumbotron div is equal to the screen size of the device used (with width:100% and height:100%).

Do you know any other technique that could give me the same result without using absolute positioning?

Hugo Paz
Hugo Paz
15,622 Points

I dont see another way. If you want it to span the full page, removing it from the normal flow seems to be the best option.

Antoine Eripret
Antoine Eripret
7,156 Points

Ok thanks :)