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

HTML How to Make a Website Sharing a Website Upload the Website

Travis DePriest
Travis DePriest
696 Points

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>

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

Lewis Pratt
Lewis Pratt
6,065 Points

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?

Lewis Pratt
Lewis Pratt
6,065 Points

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

Travis DePriest
Travis DePriest
696 Points

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%;
}
Travis DePriest
Travis DePriest
696 Points

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

Travis DePriest
Travis DePriest
696 Points

Yeah 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
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>&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;
}
Travis DePriest
Travis DePriest
696 Points

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

Marcin Smałz
Marcin Smałz
13,284 Points

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.

Paulo Marques
Paulo Marques
22,845 Points

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,

Glenn Haggis
Glenn Haggis
8,610 Points

<link rel="stylesheet" href="css/main_class.css"

Lewis Pratt
Lewis Pratt
6,065 Points

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.

Glenn Haggis
Glenn Haggis
8,610 Points

<link rel="stylesheet" href="css/main_class.css">

Lewis Pratt
Lewis Pratt
6,065 Points

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

Travis DePriest
Travis DePriest
696 Points

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

Lewis Pratt
Lewis Pratt
6,065 Points

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

Lewis Pratt
Lewis Pratt
6,065 Points

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?

Glenn Haggis
Glenn Haggis
8,610 Points

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.

Lewis Pratt
Lewis Pratt
6,065 Points

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

Glenn Haggis
Glenn Haggis
8,610 Points

This worked for me

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

}

Glenn Haggis
Glenn Haggis
8,610 Points

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>
Glenn Haggis
Glenn Haggis
8,610 Points

Hi Travis - do you have an email address?

Lewis Pratt
Lewis Pratt
6,065 Points

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

Travis DePriest
Travis DePriest
696 Points

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.

Glenn Haggis
Glenn Haggis
8,610 Points

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

<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
Travis DePriest
696 Points

The css was main_class.css

Glenn Haggis
Glenn Haggis
8,610 Points

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.

Glenn Haggis
Glenn Haggis
8,610 Points

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

Glenn Haggis
Glenn Haggis
8,610 Points

<link rel="stylesheet" href="css/main_class.css"> <link rel="stylesheet" href="css/responsive.css">

Glenn Haggis
Glenn Haggis
8,610 Points

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

Glenn Haggis
Glenn Haggis
8,610 Points

Going to sleep now it is passed midnite in South Africa

Glenn Haggis
Glenn Haggis
8,610 Points

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.

Lewis Pratt
Lewis Pratt
6,065 Points

haha, who needs sleep!

Travis DePriest
Travis DePriest
696 Points

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