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

McCartney Kellam
McCartney Kellam
748 Points

About section image not appearing during "Adding Pages to a Website" course.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mac Kellam | Voice Actor</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>Mac Kellam</h1>
        <h2>Voice Actor</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/mac.jpg" alt="Photograph of Mac Kellam" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I am Mac Kellam. This is my test website on Treehouse. I'm aspiring to become a busy voice actor. Coffee is my fuel.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/mackellam">@MacKellam</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com/mackellam"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/mackellam"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Mac Kellam.</p>
      </footer>
    </div>
  </body>
</html>
/******************** 
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%;
}



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


/******************** 
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 the code that I have up until this point. I'm pretty sure I have not overlooked anything, but my About section profile image is not displaying. When I used Nick's picture, it displayed, but would not conform to the border-radius edits. I'm stuck. Thanks for any help!

McCartney Kellam
McCartney Kellam
748 Points

Just as an update, my issue has still not been solved. I've tried to locate the possible problem but have still been unsuccessful. I would really like to proceed very soon but would like to be entirely on the same page as the instructor so the courses can go smoothly. I appreciate it!

2 Answers

Thomas Workman
Thomas Workman
7,173 Points

Hey McCartney,

Try changing the relative path for your image to ../img/mac.jpg

If you stayed consistent with how Nick sets things up, then I believe he actually uses the ../ to step out one folder and then back into the img folder. Try playing around with your path and that should do the trick. Hope that helps.

McCartney Kellam
McCartney Kellam
748 Points

Thanks for the reply, Thomas. Unfortunately, it did not work. I've fiddled around with it for a little while before I actually posted the question. I'm stumped.

Another person pointed out a lack of a semi-colon in one of my #gallery sections. Corrected, but still a no go. I also cleaned my browser's cache for the heck of it, but that didn't help either.

Thomas Workman
Thomas Workman
7,173 Points

hmm...well I still think it has to do with your file structure and how that's being referenced in your relative path for the image. Can you provide that or take a screenshot?

McCartney Kellam
McCartney Kellam
748 Points

According to what Nick typed in the videos, everything should be functioning normally. Every bit of code I have is pasted above and the picture is named properly and inside the /img/ folder. I can't see any typos which could interrupt calling it either.