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 How to Make a Website Adding Pages to a Website Style New Pages

Posted by Giulia Malaroda
Giulia Malaroda
11,030 Points

Problem with profile-photo class

I'm having trouble with the profile photo... As soon as I style the selector .profile-photo with the property display:block, the image disappears. I've checked the code with Firebug and the code is actually there but the image is not appearing. Might it be a problem with the browser?

Adam Lake
Adam Lake
3,810 Points

Hi, could you paste the code in here?

Giulia Malaroda
Giulia Malaroda
11,030 Points

Sure! This is the HTML:

<img src="img/giuliamalaroda.jpg" alt="Photograph of Giulia Malaroda" class="profile-photo">

And this is the CSS:

.profile-photo {
  display: block;   
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
Adam Lake
Adam Lake
3,810 Points

I have just tried this code myself with my own picture and it seems to work. Are you able to paste the full code in the problem isnt with this code specifically .

One thing i will add though is double check that the image is actually in the "img" folder and that it is spelt correctly and that it is definitely a JPG.

Giulia Malaroda
Giulia Malaroda
11,030 Points

I've checked it so many times... The image name and format are correct, the folder it's also the right one... But have you tried it using Mozilla Firefox?

Adam Lake
Adam Lake
3,810 Points

yes works fine in both chrome and firefox. If you could paste the full code it would give me a better idea to see whats wrong.

Giulia Malaroda
Giulia Malaroda
11,030 Points

Here you go with the complete html page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Giulia Malaroda | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Giulia Malaroda</h1>
        <h2>Designer</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 class="profile-photo" src="img/nick.jpg" alt="Photograph of Giulia Malaroda">
        <h3>About</h3>
        <p>I'm an italian girl who's always been interested in web design and development. Right now I'm studing Economics at university, but I want to improve my web designer skills at the same time too.</p>
        <p>If you'd like to follow me on twitter, my username is <a href="http://twitter.com/giuliamalaroda">@giuliamalaroda.</a></p>
      </section>
      <footer>
        <a href="http://twitter.com/giuliamalaroda"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/giulia.malaroda"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Giulia Malaroda.</p>
      </footer>
    </div>  
  </body>
</html>
Giulia Malaroda
Giulia Malaroda
11,030 Points

I've tried it on my phone browser and there it's working just fine. I'm starting to think that it's a problem related with my computer. Thank you very much!! :)

Adam Lake
Adam Lake
3,810 Points

Right I tested this but took out your style sheet link and used <style> tags in the head section and just applied it to the .profile-photo and everything worked fine image displayed and was centered in the page try changing your css link to <link rel="stylesheet" type="text/css" href="css/main.css"> and make sure its definatly named that and is in that folder and then run your css code in that sheet on this website http://validator.w3.org/#validate_by_input.

It will flag any issues you are having.

12 Answers

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

this is css code body{margin:0px;} .wrapper{ width: 100%; height: 13px;

} .container{ width: 100%; height: 22px;

border-bottom: 1px solid deepskyblue;

}

logo{

font-family: sans-serif;
font-size: 20px;
color: lightseagreen;
float: left;
margin-left: 200px;
margin-top: 0px;
display: block;

} .coverbox{ width: 84%; height: 350px; background-color: lightseagreen; margin-top: 1em; position: fixed;

} .picbox{ margin-top: 20px; margin-left: 20px; width: 120px; height: 120px; padding: 2px; background-color: grey; background-image: url("images/IMG_9533--01.jpg"); background-size:cover; background-repeat: no-repeat; border: 8px solid white; border-top: 19px solid white;

} .pinbox{ margin-top: 20px; margin-left: 115px; background-image: url("images/pin.png"); width: 50px; height: 50px; background-repeat: no-repeat; background: inherit;

}

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

how to make wapper and container and how to set it, everytime when i put something in it, it go to outside this class, how to set it, please help me?

Giulia Malaroda
Giulia Malaroda
11,030 Points

Can you post the code?

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

yeah

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

this is html code <meta charset="UTF-8"> <title>Sunil Verma</title> <link rel="stylesheet" type="text/css" href="profile.css"> </head> <body> <div> <div class="wrapper"> <div class="container"> <p id="logo">Mywall</p> </div> </div> <div class="coverbox"> <div class="picbox"> </div> <div class="pinbox">

</div>

</div> </div>

</body> </html>

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

body{margin:0px;} .wrapper{ width: 100%; height: 13px;

} .container{ width: 100%; height: 22px;

border-bottom: 1px solid deepskyblue;

}

logo{

font-family: sans-serif;
font-size: 20px;
color: lightseagreen;
float: left;
margin-left: 200px;
margin-top: 0px;
display: block;

} .coverbox{ width: 84%; height: 350px; background-color: lightseagreen; margin-top: 1em; position: fixed;

} .picbox{ margin-top: 20px; margin-left: 20px; width: 120px; height: 120px; padding: 2px; background-color: grey; background-image: url("images/IMG_9533--01.jpg"); background-size:cover; background-repeat: no-repeat; border: 8px solid white; border-top: 19px solid white;

} .pinbox{ margin-top: 20px; margin-left: 115px; background-image: url("images/pin.png"); width: 50px; height: 50px; background-repeat: no-repeat; background: inherit;

}

Giulia Malaroda
Giulia Malaroda
11,030 Points
Giulia Malaroda
Giulia Malaroda
11,030 Points

...Ok, can you please paste here also your complete HTML code?

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

its with css file

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Sunil Verma</title> <link rel="stylesheet" type="text/css" href="profile.css"> </head> <body> <div> <div class="wrapper"> <div class="container"> <p id="logo">Mywall</p> </div> </div> <div class="coverbox"> <div class="picbox"> </div> <div class="pinbox">

</div>

</div> </div>

</body> </html>

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

can you help me in my project, can we discuss about it properly, if you have time

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

i will pay you

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

i need developers

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

what happened?