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
Krysti Vires
2,804 PointsThe CSS code made my img disappear
When following along with the tutorial, I entered the CSS code in the exact way the instructor did, yet when I preview my website, the img no longer appears. When I remove the + display: block; + from the CSS code, the img reappears. Any idea why this is happening? Also, around the same time this started, the Portfolio link stopped working as well. I've checked my html code, and CSS code and can't find anything wrong with either issues.
Krysti Vires
2,804 Pointsindex.html as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Krystina Vires | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Krystina Vires</h1>
<h2>Photographer</h2>
</a>
<nav>
<ul>
<li><a href:"index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<a href="http://facebook.com/krystigardner"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<p>© 2014 Krystina Vires.</p>
</footer>
</div>
</body>
</html>
Sam Baines
4,315 PointsHi - I can see the index.html link for portfolio isnt working correctly as you accidentally have a (:) colon rather than the (=) equals sign after the href tag. So changed that over and the link should work. We will need to see your css also to help you out with the images disappearing.
Krysti Vires
2,804 Pointsmain.css as follows (issue is with the About page, profile photo, display: block; -- when disabled, the img appears, and when enabled, the img is gone)
/***********************************
GENERAL
***********************************/
body {
font-family: 'Open Sans Condensed', 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: 'Oswald', 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: 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%;
}
/***********************************
PAGE: CONTACT
***********************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
/***********************************
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: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Iain Simmons
Treehouse Moderator 32,305 PointsHi Krysti Vires, I edited your comments to properly format the code so it makes it easier to follow along.
If you're having issues with the About page, can you please post the code for that also?
To format a code block, you add a line before and after with three backticks (```), usually located to the left of the number 1 on your keyboard, and include the type of code straight after the first set of backticks, like so:
```html
<html>
<head>
<title>My webpage</title>
<head>
<body>
<h1>Welcome to my webpage!</h1>
</body>
</html>
```
Note that you also need a blank line before and after the backticks for it to work.
1 Answer
Ruben Gurdzhian
6,166 PointsKrysti,
I had the same issue when I used Firefox. There is even a technote under the video specifically for this case. All you have to do is to add clear: both before display: block to fix this issue
Krysti Vires
2,804 PointsThank you all. You've helped me tremendously and have kept me from pulling out my hair. :) And I've learned to slow down when looking at my code and to read the tech notes under the videos (which I had no idea were there) so again, THANK YOU!!!
Sam Baines
4,315 PointsSam Baines
4,315 PointsHi Krysti - post your code (html & css) and someone will take a look for you.