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