Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Build the Contact Page

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Profile 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
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.

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Many 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.

Daniel Burt
Daniel Burt
3,699 Points

Sunil, 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.

how 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
Jane Marianne Filipiak
7,444 Points

Hi, Sunil, I am just a beginner too, so can't help you. Good luck!

oh ok u from dear

Daniel Burt
Daniel Burt
3,699 Points

Marianne, 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.

its a html and css code both one time one

<!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>

body{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;

}

i need developers

i am now dealing with you, you are developer and you code and we can work together, if you want