.contact-info style changes

Question

None of the .contact-info style changes are appearing in my contact.html page. Not sure what I'm missing. Thanks.

Answer 1 · 2015-06-04T22:41:47Z

June 4, 2015 10:41pm

Hi, after looking at it for an eternity I have found what I believe to be the error. In your html in the contact details section you have closed the ul too early.

You closed yours after the ul class=contact-info tag, when it should be closed after the last li. hope it works now

Answer 2 · 2015-06-04T21:04:22Z

June 4, 2015 9:04pm

Hi Mark,

Is it possible you could post your code for us? That way we can take a look and see whats going on.

Regards,

Answer 3 · 2015-06-04T21:06:54Z

June 4, 2015 9:06pm

Here you go. Thanks Marc!

/************************************** PAGE: CONTACT ***************************************/

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

.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') }

Answer 4 · 2015-06-04T21:13:16Z

June 4, 2015 9:13pm

Hi Mark,

You're missing the ; at the end of the CSS entries.

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

Hope this helps.

Regards,

Answer 5 · 2015-06-04T21:18:34Z

June 4, 2015 9:18pm

I thought that too, but was corrected that a ; is not required when there is only one line. I still put them in, though.

Will you please post the html and the entire CSS. Please refer to the Markdown Cheatsheet link below to format your code properly.

Answer 6 · 2015-06-04T21:24:10Z

June 4, 2015 9:24pm

Here's all my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marc Busby | Web Design</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic.700italic,400,700,800" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">
    <meta name="viewport" content="width=device-width, intital-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Marc Busby</h1>
        <h2>Web Design</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 id="primary">
        <h3>General Information</h3>
        <p>If you would like to contact me about some work I have done or perhaps you're looking for a custom design, please don't hesitate to contact me.</p>
        <p>Please only use the phone contact for urgent inquiries. Otherwise, Twitter and email are the best ways to reach me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:info@example.com">info@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=thegreengamer">@example</a></li>
        </ul>
      </section>
      <footer>
        <a href="#"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="#"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Marc Busby Web Design.</p>
      </footer> 
    </div>  
  </body>
</html>

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

Regards,

Answer 7 · 2015-06-04T21:26:41Z

June 4, 2015 9:26pm

Thanks guys. Semicolons didn't seem to fix. Sorry for lack of markdown.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mark Anderson | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,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>Mark Anderson</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 Information</h3>
        <p>As a member of GemStarTech, I am available for consultation for all of your web design needs.  If you have questions, please contact me.</p>
        <p>GemStarTech -- we're here to meet all of your custom web design needs.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
          <ul class="contact-info"></ul>
            <li class="phone"><a href="tel:555-1234">555-1234</a></li>
            <li class="mail"><a href="mailto:mark@email.com">mark@email.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screenname=hotelfox">@hotelfox</a></li>
      </section>
      <footer>
        <a href="http://www.twitter.com/hotelfox"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com/hotelfox"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Mark Anderson.</p>  
      </footer>
    </div>
  </body>
</html>

CSS

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



/**************************************
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: 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 {
  display: block;
  max-width: 300px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/**************************************
PAGE: CONTACT
***************************************/

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

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

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

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

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

Answer 8 · 2015-06-04T21:45:10Z

June 4, 2015 9:45pm

Edit: This comment is wrong. I misread the MDN page. I think Richard Nicholls is correct.

When I put the html and the entire css file in codepen.io, it works except for the image links, of course. The code snip above does not work. The one error I see is that there should be no quotes around the image links.

Answer 9 · 2015-06-05T02:20:57Z

June 5, 2015 2:20am

Bingo! That was it. Thank you, Richard! I truly appreciate your efforts in finding the answer. What an amazingly fast, friendly, and helpful community here in the Treehouse forums. Thank you all for your help.

Answer 10 · 2015-06-06T09:07:16Z

June 6, 2015 9:07am

The Treehouse forum is amazing. I have been stuck a few times and always got through it with the help of the community. Good luck on your journey

Welcome to the Treehouse Community

Looking to learn something new?

Mark Anderson

Mark Anderson

.contact-info style changes

10 Answers

Richard Nicholls

Richard Nicholls

Marc Busby

Marc Busby

Mark Anderson

Mark Anderson

Marc Busby

Marc Busby

Ted Sumner

Ted Sumner

Marc Busby

Marc Busby

Mark Anderson

Mark Anderson

Ted Sumner

Ted Sumner

Mark Anderson

Mark Anderson

Richard Nicholls

Richard Nicholls