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 Portfolio

Posted by Kirolos Sadallah
Kirolos Sadallah
540 Points

Is my HTML causing the problem?

So my website currently looks like this: http://imgur.com/a/SPejz When I copy and paste the video's CSS into main.css it doesn't change the look of it it at all. When I tried replaceing the html with the file provided, the website then looked as it should. I can't seem to pinpoint what the problem is

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kirolos Sadallah | Designer?</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>Kirolos Sadallah</h1> <h2>Designer</h2> </a>a <nav> <ul id="gallery"> <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> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Exper w/ color and text</p> </a> </li>
<li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Blending</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80's</p> </a> </li>
<li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips</p> </a> </li>
<li> <a href="img/numbers-012.jpg"> <img src="img/numbers-012.jpg" alt=""> <p>Shapes</p> </a> </li>
</ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Kirolos Sadallah.</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%; }

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

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

footer { font-size: 0.75em; text-align: center; 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; }

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

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

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

/* nav background on mobile */ 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; }

4 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ok. So i made the changes to your code and a few things were missing and a couple things were added.

Your HTML: Most of the HTML was correct with the exception of your gallery id being misplaced. You placed it in the nav ul rather than where the images were being placed. Your finished HTML should look like this.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Kirolos Sadallah | Designer</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>Kirolos Sadallah</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>Exper w/ color and text</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Blending</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>80's</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-012.jpg">
            <img src="img/numbers-012.jpg" alt="">
            <p>Shapes</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo">
      </a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo">
      </a>
      <p>&copy; 2014 Kirolos Sadallah.</p>
    </footer>
  </div>
</body>

</html>

Now on to the CSS.

The CSS was mainly the reason why you weren't getting the results you wanted.

the CSS was correct but you forgot to place a # for ids(e.g. logo, gallery). I also included na ul to the #gallery css so that the bullet points were removed from the nav as well. Your finished CSS should look like 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 ***********************************/

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

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

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

    #gallery li {
      float: left;
      width: 45%;
      margin: 2.5%;
      background-color: #f5f5f5;
      color: #bdc3c7;
    }
    /********************************** COLORS ***********************************/
    /* site body */

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

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

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

Let me know if this solves your problems. if you have any question feel free to ask and if my answer helped get you to were you need to be please be sure to mark my answer as the best answer.

Kirolos Sadallah
Kirolos Sadallah
540 Points

Thanks so much!

Chyno Deluxe
Chyno Deluxe
16,936 Points

No problem! Glad I could help. =)

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

There are a few HTML elements missing from your code including the html, head and body tags and could be the reason you are not getting the results you're after. Try this. Let me know if this helps and if not what problems you continue to have after making the changes below.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Kirolos Sadallah | Designer?</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>Kirolos Sadallah</h1>
      <h2>Designer</h2>
    </a>
    <nav>
      <ul id="gallery">
        <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>
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Exper w/ color and text</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Blending</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>80's</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-012.jpg">
            <img src="img/numbers-012.jpg" alt="">
            <p>Shapes</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo">
      </a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo">
      </a>
      <p>&copy; 2014 Kirolos Sadallah.</p>
    </footer>
  </div>
</body>

</html>
Kirolos Sadallah
Kirolos Sadallah
540 Points
Kirolos Sadallah
Kirolos Sadallah
540 Points

I replaced the code but the site still looks the same :( Here's a snapshot also https://w.trhou.se/8dk977qrm6

Chyno Deluxe
Chyno Deluxe
16,936 Points

What problems are you having?

Kirolos Sadallah
Kirolos Sadallah
540 Points
Kirolos Sadallah
Kirolos Sadallah
540 Points

The bullets are still there Images aren't floating and the directory is off

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ahh!! Ok I see the problem. I'll post the answer shortly.