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
janette noel
705 PointsMy 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
12,193 PointsA 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!
Joseph Damiani
1,066 PointsYou 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
12,193 PointsTo get the image to be a circle, you set the border-radius attribute to 100% in your CSS.
.profile-photo {
border-radius: 100%;
}
janette noel
705 Pointsi added that but i not working
janette noel
705 PointsIn CSS i have the code like this:
/************** About ***************/ .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;
janette noel
705 Pointsthanks, it seems to be my browser. Its working on opera fine.
Joseph Damiani
1,066 PointsYou 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.