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

Style New Pages Lesson

When I enter the css code for my image it vanish my set image Code :

 /**************************
 PAGE: About
 **************************/

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

I have no idea whether its the Firefox browser I'm working on please help me out.

10 Answers

Corey Gibbons
Corey Gibbons
5,672 Points

post your html for the about page please

Code html:

  <head>
    <meta charset="utf-8">
    <title>Anderson Theodre | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,300italic,700,700italic,800,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>  
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Anderson Theodore</h1>
        <h2>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.html">Contract</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
     <section>
       <img src="img/nick.jpg" alt="Photograph of Anderson Theodore" class="profile-photo">
          <h3>About</h3>
            <p>Hi , I'm Anderson Theodore! this is my design portfolio where I share all my work favorite work. When I'm not designing things, I enjoy meditating, playing video games, drinking extreme amounts of coffee, and more.</p>
       <p>If you'd like send me a follow me on Instagram, my username is <a href="http://instagram.com/acethegenius">@Acethegenius</a>.</p> 
      </section> 
      <footer>
        <a href="https://www.facebook.com/stonerkid.andy"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Anderson Theodore.</p>
        </footer>
      </div>
    </body>
  </html>```

<!Doctype html> '''<html> <head> <meta charset="utf-8"> <title>Anderson Theodre | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,300italic,700,700italic,800,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head>
<body> <header> <a href="index.html" id="logo"> <h1>Anderson Theodore</h1> <h2>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.html">Contract</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Anderson Theodore" class="profile-photo"> <h3>About</h3> <p>Hi , I'm Anderson Theodore! this is my design porfolio where I share all my work favorite work. When I'm not designing things, I enjoy meditating, playing video games, drinking extreme amounts of coffee, and more.</p> <p>If you'd like send me a follow me on Instagram, my username is <a href="http://instagram.com/acethegenius">@Acethegenius</a>.</p> </section> <footer> <a href="https://www.facebook.com/stonerkid.andy"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2014 Anderson Theodore.</p> </footer> </div> </body> </html>'''

'''<div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Anderson Theodore" class="profile-photo"> <h3>About</h3> <p>Hi , I'm Anderson Theodore! this is my design porfolio where I share all my work favorite work. When I'm not designing things, I enjoy meditating, playing video games, drinking extreme amounts of coffee, and more.</p> <p>If you'd like send me a follow me on Instagram, my username is <a href="http://instagram.com/acethegenius">@Acethegenius</a>.</p> </section> <footer> <a href="https://www.facebook.com/stonerkid.andy"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2014 Anderson Theodore.</p>'''

Ugh idk why its comming out like that?

Corey Gibbons
Corey Gibbons
5,672 Points

Aright first off put HTML after ''' in your code. Then check the markup rules on this page it explains how to post code. Can't say much till I see it in markup form

  <head>
    <meta charset="utf-8">
    <title>Anderson Theodre | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,300italic,700,700italic,800,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>  
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Anderson Theodore</h1>
        <h2>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.html">Contract</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
     <section>
       <img src="img/nick.jpg" alt="Photograph of Anderson Theodore" class="profile-photo">
          <h3>About</h3>
            <p>Hi , I'm Anderson Theodore! this is my design porfolio where I share all my work favorite work. When I'm not designing things, I enjoy meditating, playing video games, drinking extreme amounts of coffee, and more.</p>
       <p>If you'd like send me a follow me on Instagram, my username is <a href="http://instagram.com/acethegenius">@Acethegenius</a>.</p> 
      </section> 
      <footer>
        <a href="https://www.facebook.com/stonerkid.andy"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Anderson Theodore.</p>
        </footer>
      </div>
    </body>
  </html>```
Corey Gibbons
Corey Gibbons
5,672 Points

I see the markup now but don't see any issurs can u explain in more detail what happens?

Alright when I put in the css I posted the display block element causes my image to vanish. which I can figure out the issue. Everything else is fine but other then that I can not center it with display: black.

here is my 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%;
}


/**************************
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-family: 'Change One' , sans-serif;
  font-size: 0.85em;
  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: 1 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px  10px;
  font-family: 'Changa One', sans-serif;
  font-size: 19px;
}


/**************************
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 {
  text-align: center;
   max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;

}


/**************************
COLORS
**************************/


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

/* green header */
header{ 
  background:#199fc4;
  border-color:#07EBEB;
}

/* nav background on mobile */
nav {
background: #235f6e;
}


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

/* links */
a { color:
    #199fc4;
}


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


/* selected nav link */
nav a.selected, nav a:hover {
  color: #00c49d;
}```
Corey Gibbons
Corey Gibbons
5,672 Points

Ok your trying to use text-align: center

Use display: inline-block

alright I'll give it try