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 trialTravis DePriest
696 PointsUploaded site different(but only by one picture)?
<pre> <code> <section> <img src="img/Frstdy.JPG" alt="Photograph of Travis Depriest" class="profile-photo" /> <h3>About</h3> <p> Hi, I'm Travis DePriest. I am a graduate student working towards his Master's of Arts in Education, a pre-professional teacher at Blacksburg Middle School, a Physics 2306 Graduate Teaching Assistant at Virginia Tech, and finally a purple belt in Brazilian Jiu-Jitsu under Tim Mannon</p> </section> </code> </pre>
Lewis Pratt
6,065 PointsAre you sure the image path has capitals in it? Also I was using the workspaces earlier and there was some strange behaviour going on with pages not updating. I know there's a maintenance break sometime today so that may be it?
Lewis Pratt
6,065 PointsWhat's the actual issue your having? Is the picture not displaying? Also maybe consider turning .JPG into .jpg which i believe is the normal standard
Travis DePriest
696 PointsOkay, Here is what the profile-photo class looks like.
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 0%;
}
Travis DePriest
696 PointsAlso, yes the photo will not display, and I don't use work spaces so that can't be the problem. Also, the linkedin and facebook logos are appearing on the same page, so I'm not sure why this isn't
Travis DePriest
696 PointsYeah it is in the image folder. Sorry, its hard for me to debug this since this is the first website I have created.
Travis DePriest
696 Points<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travis DePriest | Science Educator</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400,700,800,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main_class.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Travis DePriest</h1>
<h2>Science Educator</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>
<section>
<img src="img/FrstDy.JPG" alt="Photograph of Travis Depriest" class="profile-photo" />
<h3>About</h3>
<p> Hi, I'm Travis DePriest. I am a graduate student working towards his Master's of Arts in Education, a pre-professional teacher at Blacksburg Middle School, a Physics 2306 Graduate Teaching Assistant at Virginia Tech, and finally a purple belt in Brazilian Jiu-Jitsu under Tim Mannon</p>
</section>
<div id="wrapper">
<footer>
<hr/ >
<a href="https://www.facebook.com/travis.depriest"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png" width="40px" height="40px" alt="facebook logo" class="social-icon"></a>
<a href="http://www.linkedin.com/pub/travis-depriest/80/bab/924"><img src="img/linkedin-icon.png" width="40px" height="30px" alt="View Travis DePriest's LinkedIn profile" class="social-icon"></a>
<p>© 2014 Travis DePriest.</p>
</footer>
</div>
</body>
</html>
That is my about page.
Here is my 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
*********************/
.img.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 0%;
}
/********************
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.mail a{
background-image: url('img/envelope-icon.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;
}
a{
color: #6ab47b;
}
/* nav link*/
nav a, nav a:visited {
color:#fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Travis DePriest
696 PointsHere is responsive
@media screen and (min-width: 480px) {
/********************
TWO COLUMN LAYOUT
*********************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/********************
PAGE: PORTFOLIO
*********************/
#gallery li {
width: 28.33333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
/********************
PAGE: ABOUT
*********************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/********************
PAGE: ABOUT
*********************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo{
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
18 Answers
Marcin Smałz
13,284 PointsThere is a dot in the rule "img.profile-photo" so isn't viewing correctly. Also you should have defined a width in some IMG rule so your photos should actually show. I see you have only good start for responsive. Try to change this 2 things and tell how it's work.
Paulo Marques
22,845 PointsHello Travis,
I first find some issues in your code: <img src="img/Frstdy.JPG" alt="Photograph of Travis Depriest" class="profile-photo" />
First issue: never use Capital Letters or Uppercase letters as the name of the file, use camelCase letters, some servers lost themselves in find your file because of this.
Second issue: the extension of your file is JPG, they need to be .jpg in lowercase.
Best regards,
Glenn Haggis
8,610 Points<link rel="stylesheet" href="css/main_class.css"
Lewis Pratt
6,065 Pointsok, this thread is getting veryy confusing!
all css files should be in your css folder. if they're not, why? surely it makes sense to keep them together.
if the alt text is displaying on the page where the image should be, this would suggest that the image has not been able to load due to it not being found most likely. if the css you are applying to .profile-photo is present when you view your page through a developer tool (if you've used these before) then your css is fine.
As a test, try setting the background colour or border of .profile-photo to something bright, so you can see that it is being implemented.
check that you have all your images in the 'img' folder also and they have the right extensions and simplify their filenames for your own sake.
as previously sugested, right click on where the image should be and click on 'open image in new tab' (chrome). the new tab will have the address of where the image is trying to be pulled from. if this is wrong, theres your problem.
they're the steps i would take to troubleshoot.
Glenn Haggis
8,610 Points<link rel="stylesheet" href="css/main_class.css">
Lewis Pratt
6,065 Pointsare you seeing an 'image cannot be loaded' placeholder (a small square with a cross in it normally) instead of your image?
Travis DePriest
696 PointsNo, it just has the alt text, Photograph of Travis DePriest, instead of the image
Lewis Pratt
6,065 PointsThen I would say there may a problem with where the image is located. Is it definately in the img folder?
Lewis Pratt
6,065 Pointsright click on where the image is meant to be and if available, click open image in new tab (i use chrome). then the address in the address bar will tell you where the page is trying to pull that image from, maybe you can see your mistake there?
Glenn Haggis
8,610 Pointstry .img.profile-photo { }
It is quite difficult to isolate a problem with no context and only a snapshot of code. It is easier when seeing the all html and css you have coded. Perhaps something is being inherited in your CSS.
Lewis Pratt
6,065 Pointswouldn't it be .profile-photo img{} ?
Glenn Haggis
8,610 PointsThis worked for me
img.profile-photo { display: inline; max-width: 150px; margin: 0 auto 30px; border-radius: 0%
}
Glenn Haggis
8,610 PointsThe HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="img/test.jpg" alt="Photograph of Travis Depriest" class="profile-photo" />
<h3>About</h3> <p> Hi, I'm Travis DePriest. I am a graduate student working towards his Master's of Arts in Education, a pre-professional teacher at Blacksburg Middle School, a Physics 2306 Graduate Teaching Assistant at Virginia Tech, and finally a purple belt in Brazilian Jiu-Jitsu under Tim Mannon</p>
</div>
</div>
</div>
Glenn Haggis
8,610 PointsHi Travis - do you have an email address?
Lewis Pratt
6,065 PointsIs your main css file included properly? Main_class.css doesn't look like it's in the css folder?
Travis DePriest
696 PointsI'm pretty sure the main_class.css is not suppose to be included in the css folder....anyways that doesn't fix the problem...if that was the problem my entire css design wouldn't be showing up.
Glenn Haggis
8,610 PointsThe complete css you posted: is it responsive.css or main_class.css. I copied and pasted your html and css and it works. The only changes I made were
<img src="img/test.JPG" alt="Photograph of Travis Depriest" class="profile-photo" />
In your css
img.profile-photo { clear: both; display: inline; max-width: 150px; margin: 0 auto 30px; border-radius: 0%; }
I created a folder called img and pasted test.jpg in it.
Travis DePriest
696 PointsThe css was main_class.css
Glenn Haggis
8,610 Pointsalso make sure FrstDy.JPG is in a folder called IMG and spelt correctly. linkedin-icon.png should also be in the IMG folder.
This is what the FOLDER structure should look like:
MAIN FOLDER should have index.html in it Sub Folder inside MAIN folder called CSS should have responsive.css in it Sub folder inside MAIN folder called IMG should have FrstDy.JPG and linkedin-icon.png in it
Hope this helps - email me at hello@gimme-a-gig.com if you still have problems.
Glenn Haggis
8,610 Pointsyou should have css/main_class.css if it is in a folder called CSS
Glenn Haggis
8,610 Points<link rel="stylesheet" href="css/main_class.css"> <link rel="stylesheet" href="css/responsive.css">
Glenn Haggis
8,610 Pointsou should have css/main_class.css if it is in a folder called CSS
Glenn Haggis
8,610 PointsGoing to sleep now it is passed midnite in South Africa
Glenn Haggis
8,610 PointsYou are correct Travis. It would not display. I assume main_class.css is not in the CSS folder but outside it. You need to have both missing images in your IMG folder as the Facebook icon is loaded from the Facebook site. FrstDy.JPG and linkedin-icon.png need to be provided by yourself and placed in the folder called IMG. The other question is this a live site or just a local one? I have your site working locally by making the changes mentioned above.
Lewis Pratt
6,065 Pointshaha, who needs sleep!
Travis DePriest
696 PointsThanks for everybody's help! I think I have learned a lot more here than when I watched the videos and don't ask questions. Thanks again...I renamed the file name with lowercase letters, defined a width and height, and changed my css back to .profile-photo instead of .img.profile.photo.
Thanks again!
and the site is live now...travisdepriest.com
Christopher Bolivar
10,879 PointsChristopher Bolivar
10,879 PointsWell the I'm tag looks okay, check the class "profile-photo" maybe you that's were you messed up?