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 Polish the Navigation and Footer

burakdogramaci
burakdogramaci
15,298 Points

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

Hey Burak!

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

burakdogramaci
burakdogramaci
15,298 Points

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

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?

burakdogramaci
burakdogramaci
15,298 Points

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 :)

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!

burakdogramaci
burakdogramaci
15,298 Points

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;

}

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.

burakdogramaci
burakdogramaci
15,298 Points

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>

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>