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

My iconography is piled up with my text in my contact page

.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.facebook a { background-image: url('../img/facebook.png'); }

6 Answers

I didn't catch it when you first posted your css but you have a missing hyphen on your background size property.

background size: 20px 20px;

Should be: background-size: 20px 20px;

Thank you for posting code blocks, it makes it a lot easier to read.

I don't know if there are other problems but fix that first and see where you're at.

Also, you want to have a comma between font names.

font-family: "Dancing Script", sans-serif; You were missing a comma after "Dancing Script"

This isn't related to the particular problem you're having now but it should be fixed.

Hi Jose,

Are you saying that your phone icon is on top of the phone number?

Did you save the css and refresh the preview?

Well it seems that my text is on top of my icons. (Phone icon, Twitter and mail) and yes I did this how it looks like

http://s45.photobucket.com/user/Weedy777/media/23.png.html

Ok, can you post the html for that contact page? I think you'll only need to post the section that has the contact information.

html has to be posted properly or it wont show up in the forums.

This thread shows you how: https://teamtreehouse.com/forum/posting-code-to-the-forum

<!Doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jose Mora Hernandez | Professional Mexican</title>
    <link rel="stylesheet"href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script:700,400|Special+Elite' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Jose Mora Hernandez</h1>
      <h2>Professional Mexican</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 available for everything. I will design for food!</p>
  <p>Please contact through facebook only I'm homeless and do not own a phone.</p>
  </section>
    <section>
      <h3>Contact Details</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel:343-8453">343-8453</a></li>
        <li class="mail"><a href="mailto:jose@jose.com">jose@jose.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=joseamora">@joseamora</a></li>
      </ul>
    </section>
  <footer>
  <a href="http://facebook.com/withoutfaith13"><img src="img/facebook-wrap.png"alt="Facebook Logo" class="social-icon"></a>
  <p>&copy; 2014 Jose Mora Hernandez.</p>
</footer>
 </div>
</body>
</html>
/********************
GENERAL
********************/

body{
 font-family: "Dancing Script" 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: "Dancing Script", sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
}
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: 700;
  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: 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.facebook 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 devices*/
nav {
  background: #599a68;
}

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

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

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

This is how my CSS looks like as of now. Thank you Jason for the link.

Sir, you are a life saver! Thank you very much!!!!