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 Randhir Rana
Randhir Rana
4,754 Points

I am trying to style my about page with border radius to 100% of nick pettit's photo. It pushes the pic to corner.

When i enter this style code in main.css it pushes the image to the top right corner.

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

this is my about.html

 <section>
      <img src="img/nick.jpg" alt= "Photograph of Nick Pettit" class="profile-photo">
      <h3>About    
      </h3>
      <p> Hi, I'm Randy Rana, this is my first website of many to come. 
      </p>
      <p>If you want to give me a follow on twitter it is 
      <a href="https://twitter.com/tu_nightlife">@turnupnightlife
      </a>
      </p>
    </section>

what am i doing wrong?

Randhir Rana
Randhir Rana
4,754 Points

about.html

<section> <img src="img/nick.jpg" alt= "Photograph of Nick Pettit" class="profile-photo"> <h3>About
</h3> <p> Hi, I'm Randy Rana, this is my first website of many to come. </p> <p>If you want to give me a follow on twitter it is <a href="https://twitter.com/tu_nightlife">@turnupnightlife </a> </p> </section>

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Rana,

If you're using firefox then there's a problem with this and how it interacts with the floated header.

Adding clear: both to your #wrapper styles should fix the problem. This causes the wrapper div to clear the floated header and drop below.

Tircomnicu Vlad-Alexandru
Tircomnicu Vlad-Alexandru
1,430 Points
Tircomnicu Vlad-Alexandru
Tircomnicu Vlad-Alexandru
1,430 Points

you're code: /********************** Profile /***********************

correct code: /************* Profile *********************/

you put the "/" wrong, you must putt the "/" at the end not after the "Profile

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Good catch. I don't know if that is like that in the code or only messed up here in the forums.

If the comment is wrong then it means all of that css is ignored but the description of the problem would indicate that the css is taking effect. So I'm not sure.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

When I use that code in google chrome it works fine. Thanks for your help!