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 Build the Contact Page

My picture in the about page did not become a circle

My picture in the about page did not become a circle

here is the code in HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Janette Noel | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Janette Noel</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/janette.jpg" alt="photography of janette" class= "profile-photo"> <h3>About</h3> <p>Hi, I am janette noel, this is my design portfolio where I share my stuff. When I am not designing things, i enjoy excercising.</p> <p>if you like to follow me on twitter check Janete Noel.<a href="http://www.google.com" class="social-icon">Google</a> </p> </section> <footer> <a href="http://www.google.com" class="social-icon"></a> <img src="img/Twitterlogo2.png" alt="logo"></a> <p>© 2014 Janette Noel.</p> </footer> </div> </body> </html>

6 Answers

Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

A common mistake is having the folder or file named wrong / spelled wrong in the code, so be sure to double-check that the folder is correctly named/spelled img, and the image itself is indeed janette.jpg

In your comment you don't have the ending curly brace, which I will assume was left out in copy/paste. BUT, if you don't actually have it in your CSS, none of those attributes will work:

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

Your class = "selected" attribute in your "about" li (in the HTML) is missing the = (you have a singular - in there). It should look like:

<li><a href="about.html" class="selected">about</a></li>

Everything else seems to look okay. It's possible I'm overlooking something, but it's hard to say what's wrong without seeing the entirety of your CSS / files / etc. I hope something helps!

You need to resize your photograph to be the same as Nick's picture. His picture is 512px by 512px so you'll need to edit the size in Photoshop or Paint. This is the only way this worked for me as the other threads didn't help. Hope this helps.

Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

To get the image to be a circle, you set the border-radius attribute to 100% in your CSS.

.profile-photo {
   border-radius: 100%;
}

i added that but i not working

In CSS i have the code like this:

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

thanks, it seems to be my browser. Its working on opera fine.

You need to resize your photograph to be the same as Nick's picture. His picture is 512px by 512px so you'll need to edit the size in Photoshop or Paint. This is the only way this worked for me as the other threads didn't help. Hope this helps.