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 trialEmily Plummer
2,712 PointsWhy 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.
20 Answers
Caleb Kleveter
Treehouse Moderator 37,862 PointsThis 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
18,814 PointsIt'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.
Letta Raven
3,936 PointsThat was so helpful, thank you! (To the person who asked as well!)
Caleb Kleveter
Treehouse Moderator 37,862 PointsCan you post your code with markdown? HTML and CSS.
Emily Plummer
2,712 Pointscss: /*****************++++++* 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>© 2015 Emily Plummer.</p>
</footer>
</div>
</body> </html>
Caleb Kleveter
Treehouse Moderator 37,862 PointsCan you post a link to a screen shot? use the camera icon in the top, right corner of the workspace.
Caleb Kleveter
Treehouse Moderator 37,862 PointsI see the issue with the contact page, but the photo is still there. What browser are you using?
Emily Plummer
2,712 PointsFirefox
Caleb Kleveter
Treehouse Moderator 37,862 PointsIf you can, try chrome.
Emily Plummer
2,712 PointsI 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
2,712 PointsI 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
Treehouse Moderator 37,862 PointsI decided to replace the code from the home page to the contact page and I was able to get there.
Caleb Kleveter
Treehouse Moderator 37,862 PointsNever mind, now that won't work.
Emily Plummer
2,712 PointsThe image shows in Safari, but yeh the contact page still isn't working.
Caleb Kleveter
Treehouse Moderator 37,862 PointsLook at the errors you get from testing you code in the W3C Validator, here is the one for CSS.
Nathan Brazil
Courses Plus Student 2,756 PointsHave 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
2,712 PointsThank 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
2,712 PointsI just created a new workspace and everything is running smoothly now. Thanks for all your help.
Caleb Kleveter
Treehouse Moderator 37,862 PointsStrange. I'm glad you got it working!
Benjámin Both
508 PointsBenjámin Both
508 PointsCorrect
inline-block
display not defined in IE 6/7/8/9 and Firefox 3.