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 Schuyler Klaassen
Schuyler Klaassen
5,446 Points

"How to Make a Website" project site not displaying as expected. A few extra sets of eyes, please?

I can't seem to figure out why my project site isn't displaying/performing the way the tutorial dictates it should. Specifically, I have a thin, white band of space at the top of my header where I think it should be solid, and the nav links aren't enveloped in the green header the way I thought they were supposed to, either...

Would someone please be so kind as to let me know where I screwed up?

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>trux | Web Development</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo" >
        <h1>trux</h1>
        <h2>mmmhmmmm</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header> 
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/bluffCourse.png">
              <img src="img/bluffCourse.png" alt="">
              <p>Bluffy Course</p>
            </a>
          </li>
          <li>
            <a href="img/hawkFeathers.png">
              <img src="img/hawkFeathers.png" alt="">
              <p>Blackhawk Feathers</p>
            </a>
          </li>
          <li>
            <a href="img/libertyGreens.png">
              <img src="img/libertyGreens.png" alt="">
              <p>Jersey Links</p>
            </a>
          </li>
          <li>
            <a href="img/otterCliff.png">
              <img src="img/otterCliff.png" alt="">
              <p>Near the Sea in Acadia National Park</p>
            </a>
          </li>
          <li>
            <a href="img/spiritAir.png">
              <img src="img/spiritAir.png" alt="">
              <p>About to head to Chicago</p>
            </a>
          </li>
          <li>
            <a href="img/statePark.png">
              <img src="img/statePark.png" alt="">
              <p>Jersey lakeboats</p>
            </a>
          </li>
          <li>
            <a href="img/johnnysIcehouse.png">
              <img src="img/johnnysIcehouse.png" alt="">
              <p>Where the Blackhawks practice.</p>
            </a>
          </li>
          <li>
            <a href="img/sunRay.png">
              <img src="img/sunRay.png" alt="">
              <p>Sunset over the Hudson</p>
            </a>
          </li>
          <li>
            <a href="img/hudsonFerry.png">
              <img src="img/hudsonFerry.png" alt="">
              <p>Ferry Across the Hudson</p>
            </a>
          </li>
        </ul>
      </section>  
      <footer>
        <a href="https://twitter.com/OrenNorwalk"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://facebook.com/smk.trux"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Trux Acean</p>
      </footer>
      </div>
  </body>  
</html>

contact.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>trux | Web Development</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Raleway:400,200,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo" >
        <h1>trux</h1>
        <h2>mmmhmmmm</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html"  class="selected">Contact</a></li>
        </ul>
      </nav>
    </header> 
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I'm currently not mentally or emotionally available, nor am I looking for new work. I am, however, seeking eating gigs and, similarly, drinking and cigarette-smoking engagements. If you have any questions, please don't hesitate to contact me!</p>
      <p>Please only use the phone contact for urgent inquiries... Otherwise, twitter and email are the best ways to reach me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:0003823948">382-3948</a></li>
          <li class="mail"><a href="mailto:truxurycruise@gmail.com">truxurycruise@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=OrenNorwalk">@OrenNorwalk</a></li>  
        </ul>
      </section>  
      <footer>
        <a href="https://twitter.com/OrenNorwalk"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://facebook.com/smk.trux"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
        <p>&copy; 2015 Trux Acean</p>
      </footer>
      </div>
  </body>  
</html>

about.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>trux | Web Development</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Raleway:400,200,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo" >
        <h1>trux</h1>
        <h2>mmmhmmmm</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header> 
    <div id="wrapper">
      <section>
        <img src="img/schuyler.jpeg" alt="Photograph of Schuyler Klaassen" class="profile-photo">
        <h3>About</h3>
        <p>Hello, this is trux. I don't want to work, I just want to beat on the drum all day.</p>
        <p>If you'd like to see the jerks I follow on Twitter, my username is <a href="https://twitter.com/OrenNorwalk">@OrenNorwalk</a>.</p>
      </section>  
      <footer>
        <a href="https://twitter.com/OrenNorwalk"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://facebook.com/smk.trux"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
        <p>&copy; 2015 Trux Acean</p>
      </footer>
      </div>
  </body>  
</html>
Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you post your workspaces instead. We would need the CSS as well to see the issues.

To get started, create your first snapshot today!

  • Launch any of your workspaces.
  • Select the snapshot menu in the upper right corner.
  • Click "Take Snapshot"
  • Visit the link and share it with someone.
Chyno Deluxe
Chyno Deluxe
16,936 Points

//Fixed Code Presentation

How to post code

4 Answers

Schuyler Klaassen
Schuyler Klaassen
5,446 Points
Schuyler Klaassen
Schuyler Klaassen
5,446 Points

Yes! Sorry about that mess up there... "First time caller," didn't know how to share workspaces... Let's try this again.

Chyno, not sure what is meant by share it with someone, but here's my workspaces link: https://w.trhou.se/nw6gco064h

Chyno Deluxe
Chyno Deluxe
16,936 Points

You did it correctly =) Thank you! I'll take a look and see if I can help.

Schuyler Klaassen
Schuyler Klaassen
5,446 Points
Schuyler Klaassen
Schuyler Klaassen
5,446 Points

Thanks a lot!

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Ok so after looking at the code I managed to put you on track. Please note this is not exactly how the tutorial completes this task but I hope it will be a step in the right direction for your. I want to say you may have placed some code that belonged in the responsive.css in your main.css but I can't be certain.

You can view the code here: workspace.

I hope this helps.

Schuyler Klaassen
Schuyler Klaassen
5,446 Points
Schuyler Klaassen
Schuyler Klaassen
5,446 Points

Well, yes... Took care of that gap at the top... I just need to work on my nav colors a bit more I think.

Unfortunately, though, I don't really understand what the overflow property is doing, but I'm sure I'll come across it in my future lessons, etc.

Thank you for your time!

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ahh! Yeah. What the overflow, specifically the overflow:hidden, property is doing is making sure that all floating elements inside are being accounted for. What I mean by that is when you float an element, you are actually taking the element out of its normal content flow. When that happens, the parent element thinks it is no longer a child element.

So by setting overflow:hidden to the parent element, you are letting the parent element know that there is a child that needs to be accounted for.

Here's an example: JsFiddle.

Notice how you see the child element but you can't see the parent elements background color. Then, when you uncomment the overflow: hidden. the parent element becomes visible and understands that the child element is actually it's own child.

I hope this helps you understand a bit more.