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 Adding Pages to a Website Add Iconography

Posted by Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Contact page is not seeing the custom css from this lesson.

I am having problems today. I have tried this with Explorer, Chrome, and Firefox and all three have the same issue. The Contact page is not changing with the custom css from this lesson. It is responding to the general css from the same file, however. This is the site: http://port-80-fx0wyhsk88.treehouse-app.com/contact.html.

The code for the contact page: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ted Sumner | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Ted Sumner</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Infomration</h3>
        <p>I am looking for work</p>
      </section>
      <section>
         <h3>Contact Details</h3>
        <ul class="contact-info"></ul>
          <li class="phone"><a href="tel:222-2222">222-2222</a></li>
          <li class="mail"><a href="mailto:ted@example.com">ted@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?scree_name=nickrp">@nickrp</a></li>
      </section>
      <footer>
        <a href="http://biblewordstudy.net"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/ted.sumner.1"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Ted Sumner.</p>
      </footer>
    </div>
  </body>
</html>

The css code: 

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



/*****************************************
NAV
******************************************/

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: 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: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



/*****************************************
PAGE: ABOUT
******************************************/

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0px 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;
}

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

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

/* link color */
a {
  color: #6ab47b
}

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

/* selected nav link color */
nav a.selected, nav a:hover {
  color: #32673f;
}
Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Hi Theodore,

Can you please explain what are you trying to do?

2 Answers

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I found one error in the HTML that solved the problem. The closing tag for the unordered list was in the wrong spot.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I am following the class steps. On the contact page, I am trying to add icons before the phone number, email address, and twitter account. There is supposed to be a bottom margin, font size change, padding, and icons, none of which appear when I preview the page. The overall css (site color, font, etc.) appear properly.

This is the css not being displayed:

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