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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Yashar Soroosh
Yashar Soroosh
5,617 Points

Contact Page

Hello All. I don't know why but my contact page does not display as coded. For example I can not remove the bullets even when I set list-style to none and my phone and mail icons do not come up when I refresh the page. This is the code I'm using on css:

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

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

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

}

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

}

30 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

Your icons are not showing up because you have a typo for .contact- info in your last 2 declarations -- missing the second "t".

As to bullets, is .contact-info attached to the <ul> correctly?

Yashar Soroosh
Yashar Soroosh
5,617 Points

Thanks Sean I made the correction and the icons still do not show and .contact-info is attached to the <ul>.

Here's my revised code

for HTML:

<ul class = "contact-info"></ul>

for CSS:

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

.contact-info a { display: block;/Anchor elements will take up space so that the images will have space to be displayed/ min-height: 20px;/Minimum height of the icons/ background-repeat: no-repeat;/Backgound images will display only once/ background-size: 20px 20px;/Background image sizes/ padding: 0 0 0 10px;/*Only padding to the left side where the images are going */ }

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

}

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

}

Sean T. Unwin
Sean T. Unwin
28,690 Points

Your comments are not formatted properly. Although, the last one is.

Yashar Soroosh
Yashar Soroosh
5,617 Points

I took out all the comments still doesn't change anything

Sean T. Unwin
Sean T. Unwin
28,690 Points

Can you post your HTML again? I can't see it.

Are you sure your phone.png and mail.png images are uploaded to the right folder?

Also, I can't see the HTML either. I would look at the contact.html to make sure everything is fine there.

Yashar Soroosh
Yashar Soroosh
5,617 Points

<h3> Contact Details</h3> <ul class = "contact-info"></ul> <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li> <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li> <section> </section>

Yashar Soroosh
Yashar Soroosh
5,617 Points

Yep they are in the img folder

Yashar Soroosh
Yashar Soroosh
5,617 Points

Yep they are in the ing folder

Yashar Soroosh
Yashar Soroosh
5,617 Points

Yep they are in the ing folder

Yashar Soroosh
Yashar Soroosh
5,617 Points

Yep they are in the ing folder

Not sure if you mistyped but it should be "img" not "ing"

Post the code for your contact.html page.

Yashar Soroosh
Yashar Soroosh
5,617 Points

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Yashar Soroosh</title> <link rel ="stylesheet" href = "css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,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>Yashar Soroosh</h1> <h2>Developer</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 Information</h3> <p>I am currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p> <p>The best way to reach me is by phone or email.</p> </section> <h3> Contact Details</h3> <ul class = "contact-info"></ul> <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li> <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li> <section> </section> <footer> <a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a> <a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a> <p>© 2014 Yashar Soroosh</p> </footer> </div> </body> </html>

Sean T. Unwin
Sean T. Unwin
28,690 Points

Are any styles being set at all? Is the stylesheet linked correctly in html?

Yashar Soroosh
Yashar Soroosh
5,617 Points

Just what I shoed you on the css code

Can't see any of the code for the html.

Make sure to use markdown to show the code here on the forums.

Use '''html before the first line

and then ''' at the end of all the code.

Sean T. Unwin
Sean T. Unwin
28,690 Points

To post code:

The "`" key is on the tilde key (usually the first key in the number row on western keyboards).

  • type: \``` (without the slash)

  • press enter twice

  • paste code

  • press enter twice

  • type: \``` (without the slash)

Yashar Soroosh
Yashar Soroosh
5,617 Points
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Yashar Soroosh</title>
    <link rel ="stylesheet" href = "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,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>Yashar Soroosh</h1>
        <h2>Developer</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 Information</h3>
          <p>I am currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
          <p>The best way to reach me is by phone or email.</p>
        </section>
          <h3> Contact Details</h3>
          <ul class = "contact-info"></ul>
          <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
          <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
        <section>
        </section>
        <footer>
          <a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
           <a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a>
          <p>&copy; 2014 Yashar Soroosh</p> 
        </footer>
    </div>
  </body>
</html>
Sean T. Unwin
Sean T. Unwin
28,690 Points

tilde key 3 times (no shift)

Yashar Soroosh
Yashar Soroosh
5,617 Points
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Yashar Soroosh</title>
    <link rel ="stylesheet" href = "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,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>Yashar Soroosh</h1>
        <h2>Developer</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 Information</h3>
          <p>I am currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
          <p>The best way to reach me is by phone or email.</p>
        </section>
          <h3> Contact Details</h3>
          <ul class = "contact-info"></ul>
          <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
          <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
        <section>
        </section>
        <footer>
          <a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
           <a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png"alt="Facebook Logo" class = "social-icon"></a>
          <p>&copy; 2014 Yashar Soroosh</p> 
        </footer>
    </div>
  </body>
</html>
Yashar Soroosh
Yashar Soroosh
5,617 Points

Here's the CSS

   .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 10px;
}

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

}

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

}
Sean T. Unwin
Sean T. Unwin
28,690 Points

You need double quotes around the linkage to Google Fonts. Edit: Apparently you don't; single quotes are valid.

The <li>'s are outside of the <ul>.

There is no space before alt="Facebook Logo" in the <img> tag.

Yashar Soroosh
Yashar Soroosh
5,617 Points
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Yashar Soroosh</title>
    <link rel ="stylesheet" href = "css/normalize.css">
    <link href="http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,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>Yashar Soroosh</h1>
        <h2>Developer</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 Information</h3>
          <p>I am currently looking for work as a Rails developer. I am authorized to work in the US and Canada. Willing to relocate or be a road warrior.</p>
          <p>The best way to reach me is by phone or email.</p>
        </section>
          <h3> Contact Details</h3>
          <ul class = "contact-info"></ul>
            <li class = "phone"><a href ="tel: 416-816-2862">416-826-2862</a></li>
            <li class = "mail"><a href ="mailto: yasharsoroosh@gmail.com">yasharsoroosh@gmail.com</a></li>
        <section>
        </section>
        <footer>
          <a href="http://www.twitter.com"><img src = "img/twitter-wrap.png" alt="Twitter Logo" class = "social-icon"></a>
           <a href="http://www.facebook.com/Yejooraieeeeeeee"><img src = "img/facebook-wrap.png" alt="Facebook Logo" class = "social-icon"></a>
          <p>&copy; 2014 Yashar Soroosh</p> 
        </footer>
    </div>
  </body>
</html>

You still haven't fixed the list items. As Sean pointed out, they are outside of the unordered list.

You need to make sure the list items for phone and mail are INSIDE the ul.

To fix this, simply put the closing tag for the second ul after the mail's list item closing tag.

I'd write it out but I'm on my cell phone right now.

One last issue that may be causing the page to not display as intended is you don't have the code for the contact details inside the second "section" tag

Notice you have an opening and closing section tags after the contact details but they're empty. The opening section tag should be on its own line right before the h3 tag.

Those two fixes Sean and I suggested should get everything looking as it should.

Sean T. Unwin
Sean T. Unwin
28,690 Points

For ease of reading and other developers working on your code, I would suggest to not get in the habit of putting spaces on each side of the equals sign(=) between a tag's attribute and value. i.e. <li class = "selected"> would be <li class="selected">.

Yashar Soroosh
Yashar Soroosh
5,617 Points

Thanks Guys it worked. Sorry for the late reply. My Internet stopped working. The problem was the list items not being inside the unordered list. I really appreciate your time and help. Hopefully one day I could be as talented as you guys.