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 Add a New Page

Stage 7: About.html text and .jpg are aligned to the left?

So I copied and pasted all the text from index.html into about.html. I deleted the section contents and uploaded my pic as well as a paragraph descriptor. I'm not sure why the info isn't matching the school house example. Any ideas?

Hi William,

Can you post here your current html for "about.html"?

Are you seeing the new content that you've put in but it's not styled correctly?

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Bill Herold | Designs</title>
    <link rel = "stylesheet" href = "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=IM+Fell+English|Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel = "stylesheet" href = "css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Bill Herold</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">Contact</a></li>
       </ul>
     </nav> 
    </header>
    <div>
      <section>
        <img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
        <h3>About</h3>
        <p>Hi folks.  This is my first attempt at a webpage.  I've been at it now for a short period of time and so far I am having a blast.  Whoever knew that coding could be so much fun?  When I'm not coding, you can find me talking Vintage Star Wars with all the cool kids.  Sometimes I'll even exercise.</p>
        <p>If you'd like to follow me on Twitter, contact me <a href= "http://twitter.com/surfing">@surfing</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com/surfing"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
        <a href="http://facebook.com/billy.herold.3"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
        <p>&copy; 2015 Bill Herold</p>
      </footer>
     </div>
  </body>
</html>

3 Answers

/**********************
General
**********************/

body {
  font-family: 'Crimson Text', sans-serif;
}

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

a {
  text-decoration: none;
}

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

h2 {

  font-size: .75em;
  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: 0 10px;
  padding: 0;
}

nav li {
 display:inline-block; 
}

nav a {
  font-weight: 700;
  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%;
}



/***********************
Colors
**********************/

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

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

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

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

/* links */
a {
  color:#000;
}

/* nav links */
nav a, nav a: visited {
  color: #fff;
}

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

The picture doesn't align in the middle of the page. It looks like it's stuck on the left hand side,

Thanks Jason works like a charm now...

Bill,

It sounds like you didn't give your elements the class or id names that the previous image and paragraph had. Try opening the original code back up and seeing what classes/ids those elements had and applying them to the new content.

Hi,

Can you try changing:

 <div>
      <section>
        <img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
        <h3>About</h3>

to:

 <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
        <h3>About</h3>

The opening div above the section was given an id of wrapper in my example. Does that make any difference?

-Rich

I noticed that after posting the message as well. So my index.html is working correctly now, but the about.html is still not putting the picture in the middle of the page... So weird!!

Where is it putting the image and can you post what css you currently have for the "profile-photo" class?

In your .profile-photo rule you used commas between your margin values:

margin: 0, auto, 30px;

Remove the commas and then let us know if you're still not getting the expected result.