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

Watch Video

Posted August 30, 2014 8:33pm by

Background colour of my Navigation menu doesn't appear like it appears on video, what might cause this problem?

So I've polished the navigation and footer menu as it says on the video but my navigation bar doesn't starts right after the header, it's seems like a rectangle placed inside the header bar. What can I do to make it seem like in the video?

3 Answers

August 30, 2014 8:46pm

Hey Burak!

Please could you post your code for us to take a look at?

August 30, 2014 9:06pm

Sure, thanks for replying btw.

So, I'm going to copy/pasta the whole css code below, I couldn't find any other way to mention or quote it. Also I'm adding screenshots. it looks like this instead of this

/* ************************************* GENERAL ************************************* */ body { font-family: 'Open Sans', sans-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 0 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 0; }

nav { 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; }

/* Color for Nav */ nav a, nav a:visited { color: #fff; }

/* Logo Text */ h1, h2 { color: #fff; }

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

/* Nav background in mobile devices */ nav { background: #599a68; }

/* Selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

August 30, 2014 9:28pm

Hey, thank you for sharing your code! Your CSS looks fine to me...

Could you try posting your html also so I can take a look at that aswell?

August 30, 2014 9:53pm

Wow. Thats just great thanks for that. I should have been much more careful. Though, now that it seems to be corrected, another problem came out, as two large margins between the both sides of the navigation menu. I'm trying to find what's causing that now, yet thanks for your great help and attention :)

August 30, 2014 9:59pm

No problem Burak! I'm glad you managed to get your issue resolved.

Best of luck resolving your issue! Sounds like a positioning issue so check the margins and padding of the elements that are causing you issues!

August 30, 2014 10:10pm

Well, thanks for the best wishes, I found the other mistake as well. Turns out that I missed mentioning unordered lists while writing nav on css. Just posting the correct form, for no reason at all. But maybe helps someone.

nav  {

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

}

nav ul {

    list-style: none;
    margin: 0 10px;
    padding: 0;

}

August 30, 2014 10:14pm

I'm glad you managed to resolve the spacing issue as well!

I wish you the very best of luck with the rest of the track.

August 30, 2014 9:32pm

Sure here is the html code:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Burak Dogramaci | Netnographer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
 </head>

 <body>
  <header>
    <a href="index.html" id="logo">
      <h1>Burak Dogramaci</h1>
      <h2>Netnographer</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 the colors and texture</p>
          </a>
          </li>
          <li>
            <a href="Img/numbers-02.jpg">
                <img src="Img/numbers-02.jpg" alt="">
                <p>Playing with the blending mode.</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 photoshop brushes.</p>
          </a>
          </li>
          <li>
            <a href="Img/numbers-12.jpg">
                <img src="Img/numbers-12.jpg" alt="">
                <p>creating shapes using repetation.</p>
          </a>
          </li>
        </ul>
      </section>
      <footer>
         <a href="http://twitter.com/bdogramaci"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <a href="http://facebook.com/burakdogramaci"><img src="Img/facebook-wrap.png" alt="Facebook Logo"  class="social-icon"></a>
        <p>&copy; 2014, Burak Dogramaci</p>  
      </footer>
    </div>
 </body>

</html>

August 30, 2014 9:37pm

I've spotted the problem! Your website is being displayed like that because your heading element is closed after the nav element which means that the nav element is housed inside of the heading.

The following code will fix your problem!

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Burak Dogramaci | Netnographer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
 </head>

 <body>
  <header>
    <a href="index.html" id="logo">
      <h1>Burak Dogramaci</h1>
      <h2>Netnographer</h2>
    </a>
  </header>
    <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>
<div id="wrapper">
       <section>
        <ul id="gallery">
          <li>
            <a href="Img/numbers-01.jpg">
                <img src="Img/numbers-01.jpg" alt="">
                <p>Experimentation with the colors and texture</p>
          </a>
          </li>
          <li>
            <a href="Img/numbers-02.jpg">
                <img src="Img/numbers-02.jpg" alt="">
                <p>Playing with the blending mode.</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 photoshop brushes.</p>
          </a>
          </li>
          <li>
            <a href="Img/numbers-12.jpg">
                <img src="Img/numbers-12.jpg" alt="">
                <p>creating shapes using repetation.</p>
          </a>
          </li>
        </ul>
      </section>
      <footer>
         <a href="http://twitter.com/bdogramaci"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <a href="http://facebook.com/burakdogramaci"><img src="Img/facebook-wrap.png" alt="Facebook Logo"  class="social-icon"></a>
        <p>&copy; 2014, Burak Dogramaci</p>  
      </footer>
    </div>
 </body>

</html>

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

burakdogramaci

burakdogramaci

Background colour of my Navigation menu doesn't appear like it appears on video, what might cause this problem?

3 Answers

Luke Glazebrook

Luke Glazebrook

burakdogramaci

burakdogramaci

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Luke Glazebrook

Luke Glazebrook

burakdogramaci

burakdogramaci

Luke Glazebrook

Luke Glazebrook

burakdogramaci

burakdogramaci

Luke Glazebrook

Luke Glazebrook

burakdogramaci

burakdogramaci

Luke Glazebrook

Luke Glazebrook