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

Posted by James Golden
James Golden
3,144 Points

Did anyone else have it when you set the display to block, that your image disappears?.

I wish I could see the full code from the video. I have been following along, but I must have missed something somewhere. When I set the profile-photo class to display: block it disappears. I am guessing it becomes hidden behind another element. However the only element that is floating is the NAV, so I can't see how that would happen.

8 Answers

James Golden
James Golden
3,144 Points

In case anyone else sees this here is what happened. I am creating the About page in the tutorial. In that page the relevant HTML is:

<body>
    <header>
      <a href="index.html" id="logo">
        <h1>James Golden</h1>
        <h2>Systems Administrator</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 src="img/james.jpg" alt="Photograph of James Golden" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I am James Golden.  This is my design portoflio from my training.  I rock!  I like to exercies, talk walks, spend time with my kids, yada, yada, yada</p>
        <p> If you would like to follow me on twitter, my username is <a href="http://www.twitter.com/agoldenlife">@agoldenlife</a></p>
      </section>

Nothing wrong in that code there. The problem was in my css styling:

/****************************
HEADING
****************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

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

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

I am only including the relevant code here, but as you can see I floated my Header, and the had my photo in display: block. This made the photo move up and under the header (magically disappeared)!. Once I removed the float:left from the header, everything lined up properly (magically appeared). I am still trying to get down all this vodoo css magic. :)

Hope that might help someone else

James Golden
James Golden
3,144 Points
James Golden
James Golden
3,144 Points

Well, I figured it out actually. I did find the floating element. For some reason I had under the header "float:left". As soon as I removed that, the image was back. I knew it had to be a "floater" somewhere, just missed it the first 3 or 4 times I looked!

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Can you update your post with the CSS/HTML code?

Rebecca Nelson
Rebecca Nelson
5,835 Points
Rebecca Nelson
Rebecca Nelson
5,835 Points

I believe an earlier video instructs to float header left, so I was having the same problem. Oversight in the video sequence? Thanks for figuring it out.

Rebecca Nelson
Rebecca Nelson
5,835 Points
Rebecca Nelson
Rebecca Nelson
5,835 Points

Actually it is puzzling: in around minute 4 of the video "Styling New Pages", you can see where the code for the header contains "float: left;". Is there some reason it is working for Nick and not for us?

James Golden
James Golden
3,144 Points
James Golden
James Golden
3,144 Points

You are right. I was wondering myself why that was in there. I believe it must have been an oversight. I will go through some of the later video's to see if it is still there. Given what little I know of CSS code, I can't see how it would work for him in the code that we have typed. I took a copy of this code into codepen.io and it works the same. So the code as we have it typed would put the image under the header, because the header is floating. Either he added another element so that the image was pushed down and visible, or he removed the float. I believe he mentioned (correct me if I am wrong) that we would use the float later. So maybe when I get to that video it will make more sense.

rgcode
rgcode
649 Points
rgcode
rgcode
649 Points

Thanks for helpful explanation... Maybe Treehouse team can update the video to avoid future mix up?

Monica Collins
Monica Collins
2,777 Points
Monica Collins
Monica Collins
2,777 Points

I had the same problem, the video needs to be fixed.