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 CSS Foundations The Box Model Positioning Properties

Juan Luna
Juan Luna
11,483 Points
Posted by Juan Luna
Juan Luna
11,483 Points

Question about positioning.

Hi, I'm working with positioning properties and I used the "fixed" positioning to create a header; that works fine, but my header is covering my page's content, I don't know how to move all the content a little from the top.

http://codepen.io/porpita/pen/kjfym

Thank you

1 Answer

Caleb Viola
Caleb Viola
5,694 Points

Classes are typically useful when you need to give the same attributes to more than one element. If you need to customize one element individually, it would be better to assign it an id, which is the case of your header. Anyway, not sure what your question was, but try this. Surround all the bands in a section element and call it "bands":

<section id=bands>
    <div class="cf">
            <img src="Cro++PNG.png" alt="Cro">
            <h4 class="cro">Cro</h4>
            <p class="cro">Cro (hip hop) es el nombre artístico del cantante, productor y diseñador Carlo Waibel, nacido en la ciudad de Aalen, Alemania. El cantante su sonido como Pop y Rap, lo cual llama Raop, el cual es el nombre de su primer disco, lanzado en el 2012. Carlo comenzó a cantar a la edad de 13 años y mas adelante se interesó por la guitarra y el piano; desde el 2009 ha distribuido su música por internet donde fue descubierto por el rapero Kaas. Aparte de su proyecto musical, Carlo diseña ropa para su marca Vio Vio.</p>
        </div>
<!--And all the other ones-->
</section>

Add the css as following:

.header {
    width: 90%;
    padding-left: 450px;
    background-color: darkgrey;
    position: fixed;
    margin: 0;        <!--Modified from -20px;-->
    color: white;
}

#bands {
  padding-top:90px;
}