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 Diego Murray
Diego Murray
2,515 Points

Need help selecting all the content at the top of my web page.

Trying make a white nav bar at the top to apply affects to. My nav is floated to the left and I have my h1 floated to the right. Not sure exactly how to select the entire top section.

Diego Murray
Diego Murray
2,515 Points

In addition, I would like my background image to cover my page starting from the bottom of the new nav as i talked about above. The bottom of the background image is also being cut off.

2 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Christo,

Had a go. I added a background to the header element (which already wraps around h1 and nav so no need to add an extra div). Also added background-size: 100% to make the picture take up the full width of the page - not sure if this is what you were wanting though.

Finally, I added normalize.css to fix an issue with a gap appearing between the top of the page and the header. You should always use some sort of reset like normalize.css or Eric meyer reset as browsers tend to add default styles which can really mess with your layout.

The css I added:

header {
    background: #fff;
}

body {
    background-size: 100%;
}

To use normalize.css just download and include it above your styles.css in your index.html. Its important that you include it before your other stylesheets..

  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/style.css">

Hope this helps. Your design is looking good by the way, great choice of font :)

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Public workspace link I couldn't work out how to actually view the workspace in the browser. If anyone knows how please let me know :)

Diego Murray
Diego Murray
2,515 Points

James Anwyl

Thanks so much. This was great.

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

No problem :)

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Christo, I can't access that link, getting a page not found error.

To get a white nav bar you could place both the h1 and nav inside a div. And add a background-color to that div.

If you can get the link working or host it elsewhere I'll take a look :)

Diego Murray
Diego Murray
2,515 Points

James Anwyl

Let me try it out. If not, then I'll try to get that link to work.

Thanks

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Just found this thread

To make your workspace public you need to click the camera icon and create a 'snapshot'. The link you posted is for your private workspace so only you can access it.

Hope this helps :)

Diego Murray
Diego Murray
2,515 Points

James Anwyl

Here this should work. https://w.trhou.se/gr24m2j43v