Contact Page

Question

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');

}

Answer 1 · 2014-05-01T01:37:38Z

May 1, 2014 1:37am

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?

Answer 2 · 2014-05-01T01:48:50Z

May 1, 2014 1:48am

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:

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');

}

Answer 3 · 2014-05-01T01:51:30Z

May 1, 2014 1:51am

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

Answer 4 · 2014-05-01T01:54:03Z

May 1, 2014 1:54am

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

Answer 5 · 2014-05-01T01:58:16Z

May 1, 2014 1:58am

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.

Answer 6 · 2014-05-01T01:58:40Z

May 1, 2014 1:58am

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

Answer 7 · 2014-05-01T01:59:54Z

May 1, 2014 1:59am

Yep they are in the img folder

Answer 8 · 2014-05-01T01:59:58Z

May 1, 2014 1:59am

Yep they are in the ing folder

Answer 9 · 2014-05-01T02:00:01Z

May 1, 2014 2:00am

Yep they are in the ing folder

Answer 10 · 2014-05-01T02:00:04Z

May 1, 2014 2:00am

Yep they are in the ing folder

Answer 11 · 2014-05-01T02:01:05Z

May 1, 2014 2:01am

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

Answer 12 · 2014-05-01T02:01:50Z

May 1, 2014 2:01am

I meant img

Answer 13 · 2014-05-01T02:02:37Z

May 1, 2014 2:02am

Post the code for your contact.html page.

Answer 14 · 2014-05-01T02:03:57Z

May 1, 2014 2:03am

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

Answer 15 · 2014-05-01T02:04:02Z

May 1, 2014 2:04am

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

Answer 16 · 2014-05-01T02:06:58Z

May 1, 2014 2:06am

Just what I shoed you on the css code

Answer 17 · 2014-05-01T02:10:33Z

May 1, 2014 2:10am

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.

Answer 18 · 2014-05-01T02:10:37Z

May 1, 2014 2:10am

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)

Answer 19 · 2014-05-01T02:13:44Z

May 1, 2014 2:13am

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

Answer 20 · 2014-05-01T02:16:29Z

May 1, 2014 2:16am

Thanks I didn't know that

Answer 21 · 2014-05-01T02:16:32Z

May 1, 2014 2:16am

Thanks I didn't know that

Answer 22 · 2014-05-01T02:17:55Z

May 1, 2014 2:17am

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

Answer 23 · 2014-05-01T02:22:13Z

May 1, 2014 2:22am

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');

}

Answer 24 · 2014-05-01T02:23:46Z

May 1, 2014 2:23am

~~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.

Answer 25 · 2014-05-01T02:32:02Z

May 1, 2014 2:32am

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

Answer 26 · 2014-05-01T02:32:40Z

May 1, 2014 2:32am

nothing happened

Answer 27 · 2014-05-01T02:43:25Z

May 1, 2014 2:43am

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.

Answer 28 · 2014-05-01T02:54:32Z

May 1, 2014 2:54am

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.

Answer 29 · 2014-05-01T02:55:45Z

May 1, 2014 2:55am

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">.

Answer 30 · 2014-05-01T12:14:37Z

May 1, 2014 12:14pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Yashar Soroosh

Yashar Soroosh

Contact Page

30 Answers

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

Sean T. Unwin

Sean T. Unwin

qybjpwnice

qybjpwnice

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

qybjpwnice

qybjpwnice

Yashar Soroosh

Yashar Soroosh

qybjpwnice

qybjpwnice

Yashar Soroosh

Yashar Soroosh

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

qybjpwnice

qybjpwnice

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

Yashar Soroosh

qybjpwnice

qybjpwnice

qybjpwnice

qybjpwnice

Sean T. Unwin

Sean T. Unwin

Yashar Soroosh

Yashar Soroosh