Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.