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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Tage Smith
Tage Smith
2,997 Points

header

Okay, so my header did get thicker after following along with Nick, the letters aren't as cut off, but there's still a white line at the top.

My code: header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

h1 { font-family: "Roboto", sans-serif; margin: 15px 0; font: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

8 Answers

notf0und
notf0und
11,940 Points

Disregard my last answer. You can and do fix it alongside the video. Pay attention to the very beginning of the video and you should have it in no time.

Maybe post your CSS if you really can't get it, and we'll try to help :)

Tage Smith
Tage Smith
2,997 Points

Which video are you referring to? The one in previous comments or the one that I'm asking about now? (how do you go back to that video from this forum, btw?)

Michael Davis
Michael Davis
10,035 Points
Michael Davis
Michael Davis
10,035 Points

Try this course to get more familiar with Developer Tools... it would help you greatly with your question, but would take more than just a quick answer in the forum to explain. Especially without being able to link to your work and see it to help.

http://teamtreehouse.com/library/website-optimization

Tage Smith
Tage Smith
2,997 Points

I'm not to that point in the track, I'll have to wait until I get there.

David Makowski
David Makowski
13,676 Points
David Makowski
David Makowski
13,676 Points

A css reset is some standardized code, which u most take from some website like http://meyerweb.com/eric/tools/css/reset/ and paste it into your css.

Browsers put styles on some of the elements by default. And they are not always the same on all the browsers. The "reset" code removes those, (or at least some of them, I think you can find different versions) to make your style appear the same on all browsers or have exact control.

With the "inspect element" in chrome, you can click on the "magnifier" symbol and then hover over your header...it will show which element is causing the white line. Probably it's some margin.

Tage Smith
Tage Smith
2,997 Points

So where in my css do I paste the one from the website? Does it matter?

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

The gap at the top is usually solved by giving the header element some padding. However...

You might be missing a dot in front of 'header'. So, .header instead of header. Your html probably says <div class="header"> no?

notf0und
notf0und
11,940 Points
notf0und
notf0und
11,940 Points

Do you have a CSS reset enabled?

To (hopefully) see exactly what's causing this styling issue, you could right click the white bar, then select "Inspect Element" if you're using Chrome, or something similar if you're using Firefox. Once you do that, a window should pop up at the bottom of your screen, or possibly in a new window. On the very right of that window there are the styles, and that's where you'll want to look for margins or padding applied to your header, body, and html.

Hope that helps :)

Tage Smith
Tage Smith
2,997 Points

Dumb question but what's a 'css reset'? Also, I am using chrome I right clicked "inspect element" but now I don't quite know what I'm looking for.

notf0und
notf0und
11,940 Points

"A CSS reset is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible." http://www.cssreset.com/what-is-a-css-reset/

A reset would set a default look to your webpage across all the different browsers, as well as getting rid of some pesky occurrences, like this white bar at the top of your page.

Through the Web Design course, Nick uses a reset named Normalize.css, which you can download here: http://necolas.github.io/normalize.css/. Installation is simple: Step 1, place it beside your CSS file. Step 2, add it to your HTML before your main CSS file, like so

 <link rel="stylesheet" type="text/css" href="css/normalize.css">
 <link rel="stylesheet" type="text/css" href="css/main.css">

And that's it! See if adding the reset helps at all.

If you can't work the Element Inspector now, I think you can get by, but definitely try to get comfortable with it. For now, try setting this rule in your CSS:

body {
    margin: 0;
    padding: 0;
}

Hope this was all understandable :P Please let me know if your problem still isn't fixed by Normalize.css or that CSS.

Tage Smith
Tage Smith
2,997 Points

I pasted it into the code, it doesn't seem to work, is there another step I am missing?

Tage Smith
Tage Smith
2,997 Points

What's the step if I've already pasted it into the code?

notf0und
notf0und
11,940 Points

What do you mean, pasted that CSS into the code? And have you solved the white bar problem?

Tage Smith
Tage Smith
2,997 Points

It was already pasted into the code. It didn't do anything, was there something else that I needed to do?

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

If that doesn't work, post your html here.

Tage Smith
Tage Smith
2,997 Points

My main html file or my css file? Also, there's two "header {}" things in my css file. I tried adding a "." to both of them, one of them negated the exercise, the other took out the header and text complete, the header ended up being all white.

Tage Smith
Tage Smith
2,997 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Thing | thing</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100italic,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/responsive.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>thing.</h1>
        <h2>The thing.</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Hamburgers 1</a></li>
          <li><a href="about.html">Hamburgers 2</a></li>
          <li><a href="contact.html">Hamburgers 3</a></li>
        </ul>
      </nav>
    </header>

Here's my html for the header. I appreciate the help.

Tage Smith
Tage Smith
2,997 Points

So my code is not showing up in the comment, how do I make it appear so you can see it?

notf0und
notf0und
11,940 Points

Tage, I've edited your comment to show your HTML. Press edit to see how it's done, or go here: https://teamtreehouse.com/forum/posting-code-to-the-forum

Tage Smith
Tage Smith
2,997 Points

SO it's NOT an ellipsis, what is that accent?

Tage Smith
Tage Smith
2,997 Points
Tage Smith
Tage Smith
2,997 Points

New problem. I somehow managed to fix the line at the top, but now my pics are all out of whack. Here's the html for what's going on now:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>THING | BY Thing</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100italic,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/responsive.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>GARSH.</h1>
        <h2>The thing.</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Hamburgers 1</a></li>
          <li><a href="about.html">Hamburgers 2</a></li>
          <li><a href="contact.html" >Hamburgers 3</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
          <ul id="gallery">
            <li>
              <a href="index.html">
                 <img src="img/numbers-01.jpg" alt="">
                 <p>picture</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-02.jpg">
                 <img src="img/numbers-02.jpg" alt="">
                 <p>picture</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-06.jpg">
                 <img src="img/numbers-06.jpg" alt="">
                 <p>picture</p>
              </a>
            </li><li>
              <a href="img/numbers-09.jpg">
                 <img src="img/numbers-09.jpg" alt="">
                 <p>picture</p>
              </a>
            </li>
            <li>
              <a href="img/numbers-12.jpg">
                 <img src="img/numbers-12.jpg" alt="">
                 <p>picture</p>
              </a>
            </li>
          </ul>
        <p>picture</p>
      </section>
      <footer>
        <a href="http://twitter.com/tshsavage"><img src="img/twitter-wrap.png" alt="twitter logo" class="social icon"></a>
        <a href="http://facebook.com/tage.savage"><img src="img/facebook-wrap.png" alt="facebook logo" class="social icon"></a>
        <p>&#36; &#36 TAGE &#36; &#36;</p>
      </footer>
       </div>
  </body>
  </html>
notf0und
notf0und
11,940 Points

It's 3 backticks ( ` ) then language, then code, then 3 backticks to close the code block.

```html
code goes here
```backticks to close the codeblock
notf0und
notf0und
11,940 Points

Can you link me to the workspace preview so I can see how the images are out of whack, or maybe post your CSS along side your HTML? Alignment issues are tough to help solve with just HTML.

Tage Smith
Tage Smith
2,997 Points

http://web-3oba9tjste.treehouse-app.com/contact.html

Tage Smith
Tage Smith
2,997 Points
Tage Smith
Tage Smith
2,997 Points

Ok, the weird thing is that that pages that have the <section id= "primary> are fine, but the main page is messed up. Sorry for all the frustration...

notf0und
notf0und
11,940 Points

Ok, so the issue is still that your main page has the white bar, and that your other pages are fine?

Tage Smith
Tage Smith
2,997 Points

Yes. That was a little unclear. This page: http://web-3oba9tjste.treehouse-app.com/contact.html and the /contact page are fine, but the main page is not.

notf0und
notf0und
11,940 Points

I have to admit, I'm not sure what the issue could be. The only other suggestion I can make is to restart from that video with a new Workspace, and see if the issue still exists after that. Do keep your current Workspace, however. It will be good for comparing and finding the issue.

Since this is a new issue, and this post is 2 days old, you could also create a new post and hope someone can help find out why only the one page has the white bar.

Sorry I couldn't be of more help, Tage :(

Tage Smith
Tage Smith
2,997 Points

I don't know how, but I figured it out.