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

troy beckett
troy beckett
12,035 Points

trouble with designing website..

please have a look at my code pen below:

http://codepen.io/tbeckett24/pen/cxiHb

Can someone please explain why when I color the background of the body red it covers the whole page. What I want to achieve is this:

http://codepen.io/nickpettit/pen/deAnv

I want to have the logo and nav bar seperate from the body like most websites you see. So when I style the body it applies it to the space below the log and nav section.

Thanks for helping in advance. 'mI really eager to learn html and css but I'm currently struggling with these small problems all the time. I'm going to try and solve it myself but it would be great to get some advice.

4 Answers

you can remove the background-color from the body element and add it to the nav and logo elements in CSS

logo{

width: 30%; margin-left: 2% background: red; }

nav { width: 60%; float: right; background: red }

But im not sure why the color doesn't spread across the entire header like Nick's does

The header must be inside the body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Put your header inside the body and apply the color you want.

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Hi Trey, i am trying to get the hang of all of this myself so let's try together!

In your HTML document you first have the head where your stylesheets etc goes, then you have the body which all of your headers, divs and texts etc will be inside of.

The header is placed within the body of the HTML document which means that making a color change using the body tag in your CSS will also change the color of the header. What you can do to fix this is for an example choose your body background color and then use the header tag directly below it to change the color of your header.