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

troy beckett
troy beckett
12,035 Points
Posted by 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

Chris Neil
Chris Neil
2,231 Points
Chris Neil
Chris Neil
2,231 Points

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

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

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.

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

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
stjarnan
.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.