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 Style the Image Captions

Posted by Danny Prol
Danny Prol
4,086 Points

Hi Nick, I have a problem in the workspace. For some reason, I can't see my title, it is white header, I don't know why

If you can solve this problem... And also, my portfolio, about and contact are cover by orange :S

wuworkshop
wuworkshop
3,429 Points

Could you post your HTML and CSS in the forum so people can see your code? Makes it a LOT easier to help people.

Danny Prol
Danny Prol
4,086 Points

Yeah!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Danny Prol | Growth Marketer</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">
    <style>
      nav a {
        color: white;
        background-color: orange;
      }  

    </style>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Danny Prol</h1>
        <h2>Growth Marketer</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>Image 1</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Image 2</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Image 6</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Image 9</p>
          </a>
        </li>

        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Image 12</p>
          </a>
        </li>

      </ul>

    </section>
    <footer>
      <a href="http://twitter.com/dannyprol"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/dannyprol"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2014 Danny Prol.</p>
    </footer>
    </div>
  </body>
</html>

/********************************
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%;
}

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

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



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

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

/* nav background on mobile  */
nav {
  background: #599a68;
}

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

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


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

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

}
wuworkshop
wuworkshop
3,429 Points

It's a bit hard to read the CSS since you didn't wrap it in the Markdown syntax for rendering code. At a glance, you have some stray extra curly braces in your code and a > symbol in the following line:

body { font-family: 'Open Sans', sans-serif<

}

}

That line should say:

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

This section has extra curly braces that should be removed (one is right before the /* site body */ comment and there's another extra curly brace at the end):

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

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

This section also has extra curly braces that should be removed (it's right before the #logo):

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

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

You might want to get into the habit of just writing the code exactly how they write it in the courses so the formatting is consistent and easier to read.

Also, a good tool to check the syntax of your code is W3C's validator service:

HTML Validator: http://validator.w3.org/#validate_by_input

CSS Validator: http://jigsaw.w3.org/css-validator/#validate_by_input

Danny Prol
Danny Prol
4,086 Points

Awesome imouto! Thanks so much!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Daniel,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Imouto,

Can you copy your answer and paste it in the answer box instead of the comments, so it can be marked as best answer and this thread can be closed.

Thanks.

wuworkshop
wuworkshop
3,429 Points

Wayne Priestley , sure. Just did it. Thanks for correcting the syntax highlighting.

1 Answer

wuworkshop
wuworkshop
3,429 Points

It's a bit hard to read the CSS since you didn't wrap it in the Markdown syntax for rendering code. At a glance, you have some stray extra curly braces in your code and a > symbol in the following line:

body { font-family: 'Open Sans', sans-serif<

}

}

That line should say:

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

This section has extra curly braces that should be removed (one is right before the /* site body */ comment and there's another extra curly brace at the end):

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

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

This section also has extra curly braces that should be removed (it's right before the #logo):

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

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

You might want to get into the habit of just writing the code exactly how they write it in the courses so the formatting is consistent and easier to read.

Also, a good tool to check the syntax of your code is W3C's validator service:

HTML Validator: http://validator.w3.org/#validate_by_input

CSS Validator: http://jigsaw.w3.org/css-validator/#validate_by_input