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

Posted by Vladimir Miletic
Vladimir Miletic
6,201 Points

Hi there, I have a problem to put my profile pic into About page. Any advice?

http://vladimirmiletic.us/about.html

2 Answers

Mitchell Springer
Mitchell Springer
2,576 Points

I'm not seeing your picture either. I think what is messing you up is you are displaying it as block. Instead try

.profile-photo {
  display: inline-block;
}
Vladimir Miletic
Vladimir Miletic
6,201 Points

Thank you Michell, can you tell me where I should put that? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vladimir Miletic | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width-device-width, initial-scale=1.0">

</head> <body> <header> <a href="index.html" id="logo"> <h1> Vladimir Miletic</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portolio</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/vladimir.jpg" alt="Photograph of Vladimir Miletic" class="profile-photo"> <h3>About</h3> <p>Hi, I am Vladimir Miletic! This is my design portfoli where I share all of my favorite work. When I'm not designig things, I enjoy playing guitar, drinking good coffee and more. </p> <p> I f you'd like to follow me on twitter, my username is <a href="http://twitter.com/vladda22"> @vladda22</a></p> </section> <footer> <a href="http://twitter.com/vladda22"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/VladimirMilettic"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

    <p>&copy; 2014 Vladimir Miletic.</p> 
  </footer> 
</div>

</body> </html>

Erik Nilsen
Erik Nilsen
20,433 Points

Add it to your main.css, I believe...

Mitchell Springer
Mitchell Springer
2,576 Points

Ideally you'd put it in your css file. Otherwise I suppose you could do it inline in the html by going:

<img src="img/vladimir.jpg" alt="Photograph of Vladimir Miletic" class="profile-photo" style="display:inline-block;">

But that's not usually recommended because you can run into problems if you try to use css to customize the profile-photo class.

Erik Nilsen
Erik Nilsen
20,433 Points
Erik Nilsen
Erik Nilsen
20,433 Points

From what I can see your picture is there. Do you mind going into more detail about your problem?

Vladimir Miletic
Vladimir Miletic
6,201 Points

hmm this is strange. You are right, I can see it in Internet Explorer but not in Mozzila?