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

HTML How to Make a Website Styling Web Pages and Navigation Review: Styling Web Pages and Navigation

Posted by Ivan Poblete
Ivan Poblete
1,149 Points

Header goes below dark green navigation bar.

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

9 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

can you share the rest of the html file. your info here is how it is in the video

if you can place them between three ` on top and bottom this will place your code in a black box that is the tick marke below the tidle key next to the one.

Ivan Poblete
Ivan Poblete
1,149 Points
Ivan Poblete
Ivan Poblete
1,149 Points

Sorry, i'm not sure exactly what you're saying.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

In order to share your code you need to place it between on both the top and bottom of your code. If you just paste it into the conversation it will come out a mess. The are the little tick marks next to the one key on your keyboard.

Ivan Poblete
Ivan Poblete
1,149 Points

Got it. Which part of the html would you like to see?

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

could you share both the html and css files. I should have originally said css.

Ivan Poblete
Ivan Poblete
1,149 Points
Ivan Poblete
Ivan Poblete
1,149 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ivan Poblete | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Ivan Poblete</h1>
        <h2>Designer</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/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photshop brushes.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/espn"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/ESPN"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Ivan Poblete.</p>
      </footer>
    </div>
  </body>  
</html>
Ivan Poblete
Ivan Poblete
1,149 Points 
/************************
GENERAL
************************/

body {
  font-family: 'Open Sans', san-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/************************
HEADING
************************/

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

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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



/************************
NAVIGATION
************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0;
}

nav ul {
  list-style: none:
  margin: 0 10px;
  padding: 0;  
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/************************
FOOTER
************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/************************
PAGE: PORTFOLIO
************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;   
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/************************
COLORS
************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}
/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Still looking but two things right off the bat in the css

under the header {} you need to add a semi colon after width

under nav, you are creating a margin top and bottom of 20px and 0 left or right, you need to add a 0 which will make top 20px, 0 left and right and 0 bottom, this might fix your problem.

Ivan Poblete
Ivan Poblete
1,149 Points

I made these changes. It got better but is still hanging below the dark green nav bar.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

please let me know if that worked as all else looks okay.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Ok, how about doing a snapshot of your workspace so I can edit the code and see what else I can figure out.

To do that, go to your open workspace and, on the right side there is an icon that looks like a camera click it and, it will allow you to share. Post it and I will get back to you.

Unfortunately I am on my way out the door for a bit and will look when I get back, should be less than an hour.

Ivan Poblete
Ivan Poblete
1,149 Points

Here you go: https://w.trhou.se/2x14vxg1ky

Thank you!

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I found the problem, I missed it my first time thru..

in your Header you also have padding set to 5px for top and bottom, you need to make it 5px 0 0 and that will take care of.

Ivan Poblete
Ivan Poblete
1,149 Points

Fixed! Thanks for all your help Erik!