Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Here is the coding for HTML and main.css

Using WINDOWS. Listening to the Video LESSON CSS- Building Navigation and ul lists MY sheet to preview my work does not, in any way look like the sheet,Nick shows in the video !! Here is my coding. Where did I go wrong ????

<!DOCTYPE html>
<html>
    <head>
      <meta charset = "utf-8">
     <title>Patti Nearing|Web Designer</title>
  <link rel="stylesheet" href="css/normalize.css">
 <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' href= "css/main.css">
 <link rel="stylesheet" href="css/responsive.css">
 <meta name= "viewport" content="width=device-width, int
   </head>
 <body>
  <header>
    <div>
  <a href="index.html" id="logo">
    <h1>Patti Nearing</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.</p>
        </a>
        </li>

        <li>     
        <a href="img/numbers-06.jpg">        
       <img src="img/numbers-06.jpg" alt="">
          <p>Trying 80's glow.</p>
          </a>
        </li>        
        <li>
        <a href="img/numbers-09.jpg">        
       <img src="img/numbers-09.jpg" alt="">
          <p>playing with drips.</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="http://facebook.com/patti nearing">
      <img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon">
       </a>  

        <p>&copy; 2014 Patti Nearing.</p>

    </footer>
     </div>      
    </body>
  </html>
</li>
      </ul>
      </section> 
/********************
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 ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  }

nav li {
  display: inline-block;
}  

nav a {
  font-weight: 000;
  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;
}

/********************
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;
}
a { 
  color: #6ab47b;
}
/* nav linl */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover{
  color: #32673f;
}

9 Answers

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

I would just work in Firefox right now. Maybe the support team will chime in regarding the issue with Chrome.

From the looks of it, it seems "gallery" and "gallery li" are missing their id selectors. They should read: "#gallery" and "#gallery li".

:)

Michael, I have learned a lot from all the people who have answered me. I re-posted the main.css coding so it shows EVERYthing, including the #gallery stuff. Still need to know what is wrong with my coding that it does not match the example in the video. Will appreciate your help !!!

http://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/build-navigation-with-unordered-lists

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

I am having the same exact issue. Are you using chrome by chance?

I just did a test with workspaces, and I changed my CSS with a very noticeable change. The change was taking your CSS and replacing mine with yours. This should have totally changed my site completely as I am using different colors. Still nothing changed, and it remained the same.

Is it possible that workspaces is having an issue?

Update: I tested it in Firefox and my changes are correct now. I would imagine you are using chrome, so log in on firefox, and you will see that your changes are actually there.

it's an issue with chrome.

yes, using chrome. I wonder if I should just delete the work from this video and start over, caue it was right a one time ???

Interesting ---- so I have to download Foxfire ????? I have never used it -- ever !!!!

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

It's just as easy to use as any other browser. You should be ok with using it.

Thomas, I downloaded Firefox Now, when I open my workspace, it still does not show the two column display and does not show the color of the paragraph as light grey AND, my text in a different style and I can't see where to change it to a more readable (for me) style. aaarrrrgggghhhh!!!!!!!

ok, I will try that and see what happens !! Thanks !!

Thomas, where did you disappear to ???