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
McCartney Kellam
748 PointsAbout 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>© 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!
2 Answers
Thomas Workman
7,173 PointsHey 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
748 PointsThanks 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
7,173 Pointshmm...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
748 PointsAccording 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.
McCartney Kellam
748 PointsMcCartney Kellam
748 PointsJust 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!