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 How to Make a Website Adding Pages to a Website Style New Pages

fitrobotic
fitrobotic
1,290 Points

The image disappeared after CSS styling

I was able to see the profile image when I initially added it to the HTML, however, once I tried to style it in CSS, it disapeared. Any thoughts?

Thanks,

Davina

7 Answers

The Notes are below that video that this discussion is linked to. It contains the fix for firefox. You may want to review that.

The problem is that the floated header hasn't been cleared.

Instead of having the profile photo clear the float as explained in the Teacher's Notes you can have your wrapper element do it since that is what comes directly after the header in the markup.

I added clear: both to your existing #wrapper rule:

#wrapper {
  clear: both;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;

}

code please, html and css

It's always going to be helpful for someone to view the code you're working with. Check out Posting Code to the Forum on how to do that.

Hi Davina,

Take a look at the Teacher's Notes if you're on firefox.

fitrobotic
fitrobotic
1,290 Points

Here is the css:

GENERAL
**************************/

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

a {
text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;

}

/* glinks*/
a {
  color: #6ab47b;
}

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: 'Changa One',sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
font-size: 0.075em;
  margin:-5px 0 0;
  font-weight: normal;
}


/**************************
NAVIGATION
************************/


nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;

}

nav ul {
  list-stlye: 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%;
}


/**************************
COLOR
**************************/

/*site body*/
body {
  background-color: #fff;
  color: #999;
}

/* nav background on mobile devices*/
nav {
  background: #599a68
}

/* green header*/
header {
  background:#6ab47b;
  border-color:#599a68;
}
/* logo text*/
h1, h2 {
  color: #fff;
}

/* nav links*/
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link color*/
nav a.selected, nav a:hover {
  color:#32673f;
}

Here is the html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Davina Fisher | Super Mom</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href= "index.html" id="logo">
        <h1>Davina Fisher</h1>
        <h2> Super Mom</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p> Hi. This is Curtis Fisher with Curtis Fitness Personal Training.</p>
        <p>If you'd like to follow me on Twitter my username is  <a href="http://twitter.com/curtisfitnesstv">@curtisfitnesstv</a>.</p>
      </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/nickpetit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Davina Fisher.</p>
      </footer>
        </div>
      </body>
    </html>

Thanks!

Davina,

You didn't mention if you were using firefox or not and whether you looked at the Teacher's Notes if you are.

fitrobotic
fitrobotic
1,290 Points

Hi Jason

I am using Firefox and I don't know how to access the Teacher's notes.

Thanks,

Davina

fitrobotic
fitrobotic
1,290 Points

I see the notes now. Thanks for the info!

You're welcome.