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 Build the Contact Page

Emily Plummer
Emily Plummer
2,712 Points

Why does my image disappear when I type in display: block in the css?

My about us page was looking fine until I added the code to .css. Everything works except when I put display: block it makes my image completely disappear.

My contact page is also not showing up at all. It is saying page cannot be found.

Benjámin Both
Benjámin Both
508 Points

Correct inline-block display not defined in IE 6/7/8/9 and Firefox 3.

20 Answers

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points

This won't fix it, but it is a bug:

body { 
  font-family: 'Open Sans' sans-serif; 
}

You are missing the apostrophe between Open Sans and sans-serif:

body {
   font-family: 'Open Sans', sans-serif; 
}
rydavim
rydavim
18,798 Points

It's not actually disappearing per say, you can see it if you scroll to the right. What's happening is that it's getting displaced because of the float style on the header.

.profile-photo {
  clear: both;  // Add this line here to your .profile-photo styles! <---
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

This will make it so the floats don't interfere with your profile picture's positioning.

Floats can be a bit tricky, and it definitely takes practice to get used to how they behave.

That was so helpful, thank you! (To the person who asked as well!)

Emily Plummer
Emily Plummer
2,712 Points

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: 'Montserrat', 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: 700; 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: #39add1; border-color: #369ab9; }

/* nav background on mobile */ nav { background: #369ab9; }

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

/* links */ a { color: #39add1; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #287a94; }

about.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Emily Plummer | Senior Media Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Oxygen|Cabin:400,400italic|Fjalla+One|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Emily Plummer</h1> <h2>Senior Media 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.hmtl">Contact</a></li> </ul>

  </nav>
</header>
<div id="wrapper">
  <section>
    <img src="images/Emily.jpg" alt="Emily Plummer" class="profile-photo">
    <h3>About</h3>
    <p>Hi, I'm Emily Plummer. This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy spending time with my family.</p>
  </section>
  <footer>
    <a href="https://www.facebook.com/emily.plummer.94"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2015 Emily Plummer.</p>
  </footer>
</div>

</body> </html>

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points

Can you post a link to a screen shot? use the camera icon in the top, right corner of the workspace.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points

I see the issue with the contact page, but the photo is still there. What browser are you using?

Emily Plummer
Emily Plummer
2,712 Points

I will have to download it. I noticed earlier that some things on other sites weren't showing up, but didn't think anything of it.

Emily Plummer
Emily Plummer
2,712 Points

I will have to download it. I noticed earlier that some things on other sites weren't showing up, but didn't think anything of it.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points

I decided to replace the code from the home page to the contact page and I was able to get there.

Emily Plummer
Emily Plummer
2,712 Points

The image shows in Safari, but yeh the contact page still isn't working.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points

Look at the errors you get from testing you code in the W3C Validator, here is the one for CSS.

Nathan Brazil
PLUS
Nathan Brazil
Courses Plus Student 2,756 Points

Have you added clear: both to your css like the first person suggested? I don't see it in the css you posted. I had the same issue. The code I posted below is all you need as far as the about page image is concerned.

/************************************** PAGE ABOUT **************************************/

.profile_image {

clear: left;

display: block;

max-width: 150px;

margin: 0 auto 30px; /Top, Sides Right and Left, Bottom/

border-radius: 100%; /* This rounds the corners of an image. A value of 100% makes a circle. */

}

Emily Plummer
Emily Plummer
2,712 Points

Thank you all, my images still isn't showing up in Firefox, but is in other browsers. I will email help to see if they can tell me why contact page isn't showing.

Emily Plummer
Emily Plummer
2,712 Points

I just created a new workspace and everything is running smoothly now. Thanks for all your help.