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

Posted by rk15
rk15
1,963 Points

The background images are not appearing along with the list items on the Contact page. Seems floating/display issue.

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

'''

Contact page - '''<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Renu Kumari | Technical Writer</title>
<link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">
</head> <body> <header>
<a href="index.html" id="logo"> <h1>Renu Kumari</h1> <h2>Technical Writer</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>This is general information about contacting me.</p> <p>You can email or call me if only it is urgent. In rest of the cases, you can tweet me.</p> </section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="mail"><a href="mailto:nueram@gmail.com"></a>nueram@gmail.com</li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen-name=nueram"></a>@nueram</li> <li class="phone"><a href="tel:000 000 0000"></a>000 000 0000</li> </ul> <section> </section> <footer> <a href="https://www.facebook.com/profile.php?id=100006844172299"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <a href="https://twitter.com/nueram"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <p>© 2016 Renu Kumari.</p> </footer> </div>
</body> </html> '''

4 Answers

claudius mainja
claudius mainja
9,661 Points
claudius mainja
claudius mainja
9,661 Points

the issue is on referencing , so check on your code again

rk15
rk15
1,963 Points

Hi Claudius Mainja,

I checked again and again but could not find any issue.

rk15
rk15
1,963 Points
rk15
rk15
1,963 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Renu Kumari | Technical Writer</title>    
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">    
  </head>
  <body>
    <header>      
      <a href="index.html" id="logo">
      <h1>Renu Kumari</h1>
      <h2>Technical Writer</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>This is general information about contacting me.</p>
        <p>You can email or call me if only it is urgent. In rest of the cases, you can tweet me.</p>
      </section>
      <h3>Contact Details</h3>
      <ul class="contact-info">
        <li class="mail"><a href="mailto:nueram@gmail.com"></a>nueram@gmail.com</li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen-name=nueram"></a>@nueram</li>
        <li class="phone"><a href="tel:000 000 0000"></a>000 000 0000</li>
      </ul>
      <section>
      </section>
      <footer>
        <a href="https://www.facebook.com/profile.php?id=100006844172299"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <a href="https://twitter.com/nueram"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <p>&copy; 2016 Renu Kumari.</p>
      </footer>
    </div>  
  </body>
</html>
rk15
rk15
1,963 Points
rk15
rk15
1,963 Points 
/**********
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%;  
}

p {
  margin: 0;
}


#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: 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.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 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;
}```
rk15
rk15
1,963 Points
rk15
rk15
1,963 Points

Can anybody help me in resolving the issues appearing in Contact page. I have following issues:

  1. Links are not appearing in green.
  2. There are 6 list instead of three. Images are also appearing as a list.
  3. Contact information heading is too close to the paragraph of Gen Info.

Thanks