Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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