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

Watch Video

Posted November 24, 2014 4:44pm by

Uploaded 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>

November 24, 2014 8:02pm

Well the I'm tag looks okay, check the class "profile-photo" maybe you that's were you messed up?

November 24, 2014 8:11pm

Are 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?

November 24, 2014 8:24pm

What'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

November 24, 2014 8:35pm

Okay, 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%;
}

November 24, 2014 8:36pm

Also, 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

November 24, 2014 8:57pm

Yeah it is in the image folder. Sorry, its hard for me to debug this since this is the first website I have created.

November 24, 2014 9:21pm

<!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>&copy; 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;
}

November 24, 2014 10:17pm

Here 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

November 25, 2014 12:03am

There 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.

November 25, 2014 12:30pm

Hello 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,

November 24, 2014 10:21pm

November 24, 2014 10:27pm

ok, 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.

November 24, 2014 10:23pm

November 24, 2014 8:41pm

are you seeing an 'image cannot be loaded' placeholder (a small square with a cross in it normally) instead of your image?

November 24, 2014 8:45pm

No, it just has the alt text, Photograph of Travis DePriest, instead of the image

November 24, 2014 8:51pm

Then I would say there may a problem with where the image is located. Is it definately in the img folder?

November 24, 2014 9:08pm

right 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?

November 24, 2014 9:01pm

try .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.

November 24, 2014 9:06pm

wouldn't it be .profile-photo img{} ?

November 24, 2014 9:08pm

This worked for me

img.profile-photo { display: inline; max-width: 150px; margin: 0 auto 30px; border-radius: 0%

}

November 24, 2014 9:23pm

The 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>

November 24, 2014 9:40pm

Hi Travis - do you have an email address?

November 24, 2014 9:42pm

Is your main css file included properly? Main_class.css doesn't look like it's in the css folder?

November 24, 2014 10:18pm

I'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.

November 24, 2014 9:54pm

The 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

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.

November 24, 2014 10:15pm

The css was main_class.css

November 24, 2014 10:16pm

also 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.

November 24, 2014 10:18pm

you should have css/main_class.css if it is in a folder called CSS

November 24, 2014 10:20pm

November 24, 2014 10:24pm

ou should have css/main_class.css if it is in a folder called CSS

November 24, 2014 10:25pm

Going to sleep now it is passed midnite in South Africa

November 24, 2014 10:35pm

You 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.

November 24, 2014 10:41pm

haha, who needs sleep!

November 25, 2014 3:10pm

Thanks 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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Travis DePriest

Travis DePriest

Uploaded site different(but only by one picture)?

Christopher Bolivar

Christopher Bolivar

Lewis Pratt

Lewis Pratt

Lewis Pratt

Lewis Pratt

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

Travis DePriest

18 Answers

Marcin Smałz

Marcin Smałz

Paulo Marques

Paulo Marques

Glenn Haggis

Glenn Haggis

Lewis Pratt

Lewis Pratt

Glenn Haggis

Glenn Haggis

Lewis Pratt

Lewis Pratt

Travis DePriest

Travis DePriest

Lewis Pratt

Lewis Pratt

Lewis Pratt

Lewis Pratt

Glenn Haggis

Glenn Haggis

Lewis Pratt

Lewis Pratt

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Lewis Pratt

Lewis Pratt

Travis DePriest

Travis DePriest

Glenn Haggis

Glenn Haggis

Travis DePriest

Travis DePriest

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Glenn Haggis

Lewis Pratt

Lewis Pratt

Travis DePriest

Travis DePriest