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 Matthew Boysel
Matthew Boysel
295 Points

Header not displaying all the way

I am working on Doctor Lady Bug and am trying to figure out how to have the picture in the header show completely. It's currently at 176px, but I think if I extend it to 300px, it will display the picture in it's entirety. Any help is greatly appreciated!

1 Answer

Phuc Tran
Phuc Tran
6,542 Points
Phuc Tran
Phuc Tran
6,542 Points

There are lots of things going on in the code, but in fact, the main structure of your header (div with class="container header-Image") includes

  • The 1st (not direct) child div with class="span" : which is the container for the logo/headerPic => SET THIS TO ANOTHER CLASS/ID like id="topPic"
  • The div with class="row-fluid post-header"> : which is the container for Navigation And below is the content which the main class="contain-holder"

The situation was:

  • Background was set for the whole header, doesn't matter which z-index, float, or clear element are used, either the background will stay on top of the main navigation or the other way.
  • The height of the header container should not be fixed at 200px, or any value at all, since it should be automatically accumulated for the of all the elements inside.

This is how I did it:

  • Remove background image and remove the height of <div class="container headerImage">
  • Add background image to class/ID topic, set height to 300px
  • For the annoying white space below the header, go to <div class="content-holder clearfix"> and remove the top: 80px;

Hope this helps!

Cheers.