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!

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 Mary Nowak
Mary Nowak
1,441 Points

How to Make a Website: Why are my CSS commands changing my About page instead of my Portfolio page?

I must have made some error early on that keeps messing me up now. But I'm not sure if that's because of my HTML or my CSS work (or both?) Here is my index.HTML:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Mary Nowak  |  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">
      <link rel="stylesheet" href="css/responsive.css">
          </head>
    <body>
     <header>
       <a href="index.html" id="logo">
       <h1>Mary Nowak</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 modes in Photoshop.</p>
           </a>
            </li>       
           <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create and 80s 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 repetition.</p>
           </a>
            </li>          
         </ul>
        </section>
       <footer>
         <a href="http://twitter.com/MaryXNowak"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
       <p>&copy; 2015 Mary Nowak.</p> 
       </footer>
     </div>
     </body>
</html>
Mary Nowak
Mary Nowak
1,441 Points

also my main.css:

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

h3{
  margin: 0 0 1em 0;
  }


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

nav ul {
  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: 10;
  padding: 5%;
  font-size: 0.75em;
  color: #bcd3c7;

}


/****************************
PAGE: ABOUT
*****************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/****************************
PAGE: CONTACT
*****************************/


.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  }

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

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

/* links */
a {
  color: #6ab47b;
}

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


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

1 Answer

Charles Smith
Charles Smith
7,575 Points
Charles Smith
Charles Smith
7,575 Points

You have a typo in your footer. Color should have a # instead of the quote.

Mary Nowak
Mary Nowak
1,441 Points

Oh my gosh, that's it! How stupid of me! Thank you!!!

Charles Smith
Charles Smith
7,575 Points
Charles Smith
Charles Smith
7,575 Points

No problem. Two more tips:

You can sort of mentally track where something breaks and examine that. You can also let the computer do it - most browsers you can right-click and select "Inspect element" and it will show the HTML and CSS properties being applied to that element. So if you'd inspected this, you'd see that it wasn't applying the color. Then you can track down and troubleshoot just that tag.

Mary Nowak
Mary Nowak
1,441 Points

OK yes I see that in my Chrome tools - it's every interesting to see how it's broken down....but I have no idea what it's telling me, LOL.