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

CSS

Darrell Brown
PLUS
Darrell Brown
Courses Plus Student 1,288 Points
Posted by Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

Stage 7 - Adding pages to a website... Photo error

http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/style-new-pages

This is where I am...

My photo was appearing just fine until Nick said to make the changes in the 'main.css' file 

/*** PAGE: ABOUT ***/

.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
}

.... when I put this in my main.css my picture disappears, when I cut it out and save, my picture comes right back.... I looked over everything like 5x and I just can't figure it out.

Please help, thank you Forum-Community! =)

jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

That code looks right, which suggests the problem is elsewhere.

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

Thanks Jason... I wonder what it is though??... I got a headache looking over the code so many times added with being frustrated. =(

jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

You could try putting another statement in the file, with a known outcome, just above .profile-photo. If that doesn't work you've almost certainly got a typo or similar above it in that file somewhere.

Craig Watson
Craig Watson
27,930 Points

Hi Darrell,

Are you familiar with markdown to embed your code onto the forum ?? If not the is usually a link below the comment box if you click to leave a comment it should say Markdown Cheatsheet in bold.

Once familiar please can you copy and paste both HTML and CSS in separate wraps i.e one with 3backticks then html and another 3backticks the css.

I will take a l@@k over all your code to see if i can spot an issue it may be in html (unlikely but worth checking) also it helps me learning to diagnose other peoples issues !

Thanks Craig

5 Answers

Craig Watson
Craig Watson
27,930 Points

If you check your code Darrell you have listed the "property" font-family twice, below is as copied from your code:

body { font-family: font-family: 'Economica', sans-serif; }

what the video and google suggest is to create a font stack e.g. :

body { font-family: 'Economica', Arial, sans-serif; }

giving the browser a list of fonts go through should the chosen font not load or be available.

I have now spotted a spelling error on the "title" tag in your head element too..

Craig

Craig Watson
Craig Watson
27,930 Points

By you don't miss a trick Marcus ..

I had simply used Darrell's original code to illustrate the issue I was pointing out,

The font proves we all make mistakes ...

Craig

Marcus Parsons
Marcus Parsons
15,719 Points

Well, I edited your font name to the correct font and edited your code so that it would render properly. If we are going to post code correcting someone, I believe that we should be correct ourselves, but we can't be correct all the time. No one can. So, it is perfectly fine to make mistakes; they have to be pointed out, though, because otherwise, it leads to bad practices and disastrous consequences. I accidentally deleted my comment, but I tell you about everything I edit because I can't just make shadow edits without telling someone, and plus it helps us all learn and grow.

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

Thanks a million Craig, I took out that extra font-family... appreciate it bud!

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

Thanks so much Marcus for all your help as well. You guys are all so awesome, I really appreciate all of your feedback. Have a wonderful day or night depending where you are... I'm in Thailand, so yeah.

Marcus Parsons
Marcus Parsons
15,719 Points

Anytime, Darrell. We all try to be as helpful as we can be. You have a wonderful day/night as well, my friend!

Darrell Brown
PLUS
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points 
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
    <tiltle>Darrell Brown | My Life Stuff</tiltle>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Glegoo|Economica:400,700italic|Poiret+One|Josefin+Sans|Josefin+Slab|Gloria+Hallelujah|EB+Garamond|Architects+Daughter|Audiowide|Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href=index.html id="logo">
        <h1>Darrell Brown</h1>
        <h2>My Life Stuff</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/profile pic-17.jpg" alt="Photograph of Darrell" class="profile-photo">***
        <h3>About</h3>
        <p>Hi, I'm Darrell Brown! This is a photo gallery, that I made for my family in America, as well as for my children to remember our experiences while living in Thailand.</p>
        <p>If you'd like to follow me on Twitter my username is <a href="http://twitter.com/Imsuccessful37">@Imsuccessful37</a></p>
      </section>
      <footer>
        <a href="http://twitter.com/Imsuccessful37"></a><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> 
        <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
        <p>&copy; 2015 Darrell Brown.</p>
      </footer>
    </div>
   </body>
</html>

/*************************************
GENERAL
*************************************/

body {
  font-family: font-family: 'Economica', 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: 'Architects Daughter', cursive;
  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;
  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 */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6d647b;
}

/* nav links */
nav a, nav:visited {
  color: #fff
}

/* selected nav link color */    
nav a.selected, nav a:hover {
  color: #326738
}

... I think I did this right, but, it's my first time sending code, so let me know what I could have done better, OK

Craig Watson
Craig Watson
27,930 Points

Hi Darrell,

HTML has come through fine, css has come through as plain text but not to worry unless you want to edit it for future reference.

I'm not certain if this is because the css hasn't come through correctly but there are "#" symbols before you id selectors?

Craig

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

I added periods right before the CSS to separate it, that was my fault.... I didn't know it would affect the css

But, just for the post though, not in the actual code.

jasonjones5
PLUS
jasonjones5
Courses Plus Student 5,571 Points
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

Again not sure if the HTML has posted correctly but not seeing an actual HTML tag, or opening/closing head tags. You've got no quotes around the index.html a tag (might throw an error, hard to tell) and am not seeing identifiers (.class or #id) for a lot of your CSS but that may be the forum cleaning up the post.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Darrell,

I've taken a good look through your code and below is a revised version with comments illustrating some slight changes I made: 

<!DOCTYPE html>
<html><!-- There was no html opening or closing (maybe you cut this out when copy and paste :)-->
<head><!-- There was no head opening/ closing tag-->
    <meta charset="utf-8">
    <title>Darrell Brown | My Life Stuff</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Glegoo|Economica:400,700italic|Poiret+One|Josefin+Sans|Josefin+Slab|Gloria+Hallelujah|EB+Garamond|Architects+Daughter|Audiowide|Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
</head>

<body><!-- There was no body tag-->
    <header>
        <a href="index.html" id="logo"> <!-- There was no "" wrapping link-->
            <h1>Darrell Brown</h1>
            <h2>My Life Stuff</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>
            <!-- Change your file name so it is a dash not a space -->
            <img src="img/profile-pic-17.jpg" alt="Photograph of Darrell" class="profile-photo">

            <h3>About</h3>

            <p>
                Hi, I'm Darrell Brown! This is a photo gallery, that I made for my family in America, as well as for my children to remember our experiences while living in Thailand.
            </p>

            <p>
                If you'd like to follow me on Twitter my username is <a href="http://twitter.com/Imsuccessful37">@Imsuccessful37</a>
            </p>

        </section>

        <footer>
            <!-- the <a href=""></a> was not wrapping the image tag-->
            <a href="http://twitter.com/Imsuccessful37"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

            <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
            <p>&copy; 2015 Darrell Brown.</p>

        </footer>
    </div>

</body>
</html>

As Jason mentioned there were a couple of things missing but this may have been down to you leaving it out when copy and pasting. Still be sure to run my code through W3C HTML Validator It may still throw out errors and warning...... warnings i wouldnt worry so much about unless there are a considerable amount.

I will post the CSS separate for ease of reading!

Craig

Craig Watson
Craig Watson
27,930 Points

Here is the CSS, I only spotted on error which was on a font-family nothing to do with img on about page. 

/*************************************
GENERAL
*************************************/

body {
    font-family: 'Economica', sans-serif; /*Repeated font family property*/
}

#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: 'Architects Daughter', cursive;
    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; 
    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 */ 
nav { 
    background: #599a68; 
}

/* logo text */ 
h1, h2 { 
    color: #fff; 
}

/* links */ 
a { 
    color: #6d647b; 
}

/* nav links */ 
nav a, nav:visited { 
    color: #fff 
}

/* selected nav link color */
nav a.selected, nav a:hover { 
    color: #326738 
}

If none of this works and the image still vanishes im stuck for answers but we can always tweet nick or guil to help, I'm not sure i mentioned to remove the space in your file name and replace with an dash..

Hope you mange to resolve the issue but just leave a comment if not!

Craig

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

The '/html' is at the bottom of the page....

The link '/head' is at the end of the 'title' and.... 'link rel="stylesheet"....

The '/body' is at the bottom of the page as well.

Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points
Darrell Brown
Darrell Brown
Courses Plus Student 1,288 Points

Hi Craig thank you... But, that is not a repeated font-family property... it is a back up, that Google provides and the video explained to use in case there is not option for the first listed 'font-family' property.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Darrell,

Darrell, did you make the changes that Craig suggested in your profile photo by renaming it without a space in the filename? Spaces in filenames when working with the web are a big No No! You should use a dash - or and an underline _ instead of a space in a file name. This is why your profile photo won't show up properly.

I also edited your code so that it would render properly. Here is a sample image for how to post code but also remember to leave a blank line above and below every block of code:

code

Marcus Parsons
Marcus Parsons
15,719 Points

And Craig,

The reason you aren't seeing those tags (for future reference) is when the code isn't put into proper tags on the forum and spaced accordingly. He has those tags in his code; they just weren't rendering properly.