Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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