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
Jane Marianne Filipiak
7,444 PointsProfile photo: position and radius
Hi, I cannot find a way to get my profile photo on the about page to be in the centre like Nick's photo. Mine is off to the left. Also having coded the border-radius to 100%, my photo is still rectangular. As usual I have checked my code several times and cannot find what is causing this. Your comments appreciated.
11 Answers
James Ingmire
11,901 Points@Marianne Filipiak post your code up and we can have a look for you if this does not help or in the future when posting problems. However have guessed here what your stuck on, has taken me a while to say the least. The html section of the page your targeting 'i hope':
<div id="wrapper">
<section>
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favroite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p>
</section>
And finally the important bit; the css. Have just included a snippet of code regarding the image you want to center. The problem is that I bet you view your website as it is in Chrome is will work fine however in Firefox the image wont show or it will be in the top right corner. Edit the code as shown below and the code will work in both.
.profile-photo {
max-width: 150px;
margin: 0px auto 30px;
border-radius: 100%;
text-align: center;
display: block;
clear: both;
}
Hope this works for you and you understand why an extra bit of code is needed. Any problems relpy and let me know.
Daniel Burt
3,699 PointsSunil, perhaps it would be better to start your own thread if you're having issues. This thread was started by Marianne who hasn't had the chance to post her own code and consequently, get an answer yet. Let's be fair to her.
Sunil Verma
Courses Plus Student 211 Pointshow to make wapper and container and how to set it, everytime when i put something in it, it go to outside this class, how to set it, please help me?
Jane Marianne Filipiak
7,444 PointsHi, Sunil, I am just a beginner too, so can't help you. Good luck!
Sunil Verma
Courses Plus Student 211 Pointsoh ok u from dear
Daniel Burt
3,699 PointsMarianne, it's much easier to help you if you put the code you are working with in to this forum post. Then we can have a look at it for you and tell you where you're going wrong.
Sunil Verma
Courses Plus Student 211 Pointsits a html and css code both one time one
Sunil Verma
Courses Plus Student 211 Points<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Sunil Verma</title> <link rel="stylesheet" type="text/css" href="profile.css"> </head> <body> <div> <div class="wrapper"> <div class="container"> <p id="logo">Mywall</p> </div> </div> <div class="coverbox"> <div class="picbox"> </div> <div class="pinbox">
</div>
</div>
</div>
</body> </html>
Sunil Verma
Courses Plus Student 211 Pointsbody{margin:0px;} .wrapper{ width: 100%; height: 13px;
} .container{ width: 100%; height: 22px;
border-bottom: 1px solid deepskyblue;
}
logo{
font-family: sans-serif;
font-size: 20px;
color: lightseagreen;
float: left;
margin-left: 200px;
margin-top: 0px;
display: block;
} .coverbox{ width: 84%; height: 350px; background-color: lightseagreen; margin-top: 1em; position: fixed;
} .picbox{ margin-top: 20px; margin-left: 20px; width: 120px; height: 120px; padding: 2px; background-color: grey; background-image: url("images/IMG_9533--01.jpg"); background-size:cover; background-repeat: no-repeat; border: 8px solid white; border-top: 19px solid white;
} .pinbox{ margin-top: 20px; margin-left: 115px; background-image: url("images/pin.png"); width: 50px; height: 50px; background-repeat: no-repeat; background: inherit;
}
Sunil Verma
Courses Plus Student 211 Pointsi need developers
Sunil Verma
Courses Plus Student 211 Pointsi am now dealing with you, you are developer and you code and we can work together, if you want
Jane Marianne Filipiak
7,444 PointsJane Marianne Filipiak
7,444 PointsMany thanks, James. I will send a clip of my code, as you suggest, in future queries. The reason why I post to this forum is because I cannot see anything wrong with my code which I will have checked several times already! Anyway, I found out what caused this problem. The photo I tried originally to centre and set a border radius for, had an artiistic effect on it. This affected its ability to become rounded at the corners. Not sure why it couldn't become centred though. The new photo- no added affects, works just fine.