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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Posted by Charlotte James
Charlotte James
8,449 Points

Multiple image problems!

My profile picture is stuck at the top not in the center without a space between it and the nav header, and I also can't get it to be rounded. I have rewatched the last 2 videos and I tried what other people have done to fix this problem. I am sure I'm missing something I am just at a loss.

Charlotte James
Charlotte James
8,449 Points

I don't think my problem is in this file, but here it is.

/*********************************
PAGE: ABOUT
**********************************/

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
Charlotte James
Charlotte James
8,449 Points

Here is also my about.html file that is copied the code from the indext.html to the about.html. Which I then moved the class selection from portfolio to about and then deleted the code between <section> and </section> .

<!DOCTYPE html>
<html>
    <head>
   <meta charset="utf-8">
    <title>Charlotte James |Designer Violinist </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
    <body>
    <header> 
      <a href="index.html" id="logo">
        <h1>Charlotte James</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 id="wrapper">
      <section>
        <img src="img/charlotte.jpg" alt="Photograph of Charlotte James" class=".profile photo">
        <h3>About</h3>
        <p> Hi, I'm Charlotte James! When I'm not coding, I enjoy spending time with family, playing the violin, hiking in the mountains, and more. </p>
        <p> I don't have a Twitter account just yet, but if you would like to follow me on Instagram my user name is <a href="http://instagram.com/charlotte__james__">charlotte__james__</a>.</p> 
      </section> 
        <footer>
        <a href="http://instagram.com/charlotte__james__"> <img src="img/instagram.png" alt="Instagram logo"class="social-icon"></a>
        <a href="http://www.facebook.com/charlotte.james.9028"><img src="img/facebook.wrap.png" alt="Faebook logo" class="social-icon"></a>
        <p>&copy; 2017 Charlotte James</p>
        </footer>
      </div>
    </body>
</html>

2 Answers

Yaasir Hassan
Yaasir Hassan
10,176 Points
Yaasir Hassan
Yaasir Hassan
10,176 Points

Hey Charlotte, Your picture class you gave the html says (class=".profile photo) and in your css you wrote ( .profile-photo). To fix this remove the dot that is before the profile in the html and add a hyphen in your between profile and photo like this ------(class="profile-photo"). To make your picture rounded the border radius has to be 50%. ------ border-radius: 50%;

Charlotte James
Charlotte James
8,449 Points

Okay, I changed ".profile-photo" to "profile-photo" in both the about.html file and in the main.css file. I saved the changes and refreshed the preview page but it is still on the left of the page with no top margin.

/********************************* PAGE: ABOUT **********************************/

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

Yaasir Hassan
Yaasir Hassan
10,176 Points
Yaasir Hassan
Yaasir Hassan
10,176 Points

try this

/********************************* PAGE: ABOUT **********************************/

profile-photo { clear: both; display: block; max-width: 150px; margin: 20px auto 30px; border-radius: 50%; }