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 Anderson Theodore
Anderson Theodore
636 Points

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
Corey Gibbons
Corey Gibbons
5,672 Points

post your html for the about page please

Anderson Theodore
Anderson Theodore
636 Points

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>```
Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

<!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>'''

Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

'''<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>'''

Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

Ugh idk why its comming out like that?

Corey Gibbons
Corey Gibbons
5,672 Points
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

Anderson Theodore
Anderson Theodore
636 Points 
  <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
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?

Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

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.

Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

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
Corey Gibbons
Corey Gibbons
5,672 Points

Ok your trying to use text-align: center

Use display: inline-block

Anderson Theodore
Anderson Theodore
636 Points
Anderson Theodore
Anderson Theodore
636 Points

alright I'll give it try