Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Style New Pages

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?

Hi, could you paste the code in here?

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

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.

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?

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.

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>

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!! :)

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

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;

}

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?

Can you post the code?

yeah

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>

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;

}

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

its with css file

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

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

i will pay you

i need developers

what happened?