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

Posted by Patti Nearing
Patti Nearing
696 Points

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
Thomas Seelbinder
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.

Michael Mahler
Michael Mahler
8,560 Points
Michael Mahler
Michael Mahler
8,560 Points

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

:)

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

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
Thomas Seelbinder
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.

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

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 ???

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

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

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points
Thomas Seelbinder
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.

Patti Nearing
Patti Nearing
696 Points

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!!!!!!!

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

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

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

Thomas, where did you disappear to ???