Profile Image help...?

Question

Instead of my profile image being centered under the header, like Nick's, it is being forced to the top right of the page. The bottom corners of the image are rounded, but the top corners are flush with the top of the page, and squared (again, flushed to the top of the page). Basically, what's happening, is that my profile image isn't ending up in the same spot as Nicks, although all the code entered in CSS is identical.. Help?

Answer 1 · 2015-02-17T19:32:43Z

February 17, 2015 7:32pm

I found it. The header is floated left and the profile photo isn't cleared. Since you probably don't need the header floated, I just removed that line. It's on line 33 in the pen.

Answer 2 · 2015-02-17T18:13:28Z

February 17, 2015 6:13pm

/*****************************
Page:About
******************************/

.profile-photo { 
  display: block;
  max-width: 150px;
  margin: 0 auto 30px; 
  border-radius: 100%;  /***makes the piture circular***/
}

Answer 3 · 2015-02-17T18:16:02Z

February 17, 2015 6:16pm

I think it's somehow getting caught up in the "wrapper" code, but not sure how/why... That was the CSS side of it...here is the html side: (btw: this is from the tutorial on "how to make a website")...

</header> <div id="wrapper"> <section> <img src="img/IMG_2092.JPG" alt="photgraph of Daniel Thomas" class="profile-photo"> <h3>About</h3> <p>Greetings! This is where you can find a bit of personal information about myself.. Not that I'm interesting or anything, but this is a test!</p> <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/danielwthomas3">@danielwthomas3</a>.</p> </section>

Answer 4 · 2015-02-17T18:17:45Z

February 17, 2015 6:17pm

Here's all of the html, if it makes it easier:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Daniel Thomas | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Daniel Thomas</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/IMG_2092.JPG" alt="photgraph of Daniel Thomas" class="profile-photo">
        <h3>About</h3>
        <p>Greetings!  This is where you can find a bit of personal information about myself..  Not that I'm interesting or anything, but this is a test!</p>
        <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/danielwthomas3">@danielwthomas3</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com/danielwthomas3"><img src="img/twitter-wrap.png" alt="Twiter logo" class="social-icon"></a>
        <a href="http://facebook.com/danielwthomashomes"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2015 Daniel Thomas.</p>
      </footer>
    </div>
  </body>
</html>

Answer 5 · 2015-02-17T18:42:02Z

February 17, 2015 6:42pm

If I change the CSS code to "inline", instead of "block", the picture moves underneath the header, but it's not centered. If I don't add any CSS, the image is perfectly centered, without the obvious CSS changes. Hope that helps... Sorry...I'm definitely a newbie to this :)

Answer 6 · 2015-02-17T18:44:21Z

February 17, 2015 6:44pm

Sure thing:

/*****************************
GENERAL
******************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
 max-width: 940px; 
 margin: 0% auto;
 padding: 0% 5%;  /***left margins is 1st value, right margin is 2nd value***/
}

a {
  text-decoration: none; 
}

img {
  max-width: 100%; 
}

h3 {
  margin: 0 0 1em 0;
}


/*****************************
HEADING
******************************/

header {
  float: left; 
  margin: 0 0 30px 0; /***top, then clockwise top/right/bottom/left***/
  padding: 5px 0 0 0; /***we add padding to add space w/o actually removing margin***/
  width: 100%; /***will make the image stretch across entire page***/
}

#logo{
  text-align: center; 
  margin: 0; 
}  

h1 {
  font-family: 'Changa One', sans-serif; 
  margin: 15px 0; 
  font-size: 1.75em; /***one 'em' is ~ 16 point font in size for non-headline font***/
  font-weight: normal; 
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em; 
  margin: -5px 0 0;  /*** top left/right bottom***/
  font-weight: normal;
}



/*****************************
NAVIGATION
******************************/

nav {
  text-align: center; 
  padding: 10px 0;
  margin: 20px 0 0; 
}

nav ul {
  list-style: none; 
  margin: 0 10px; 
  padding: 0;
}

nav li {
  display: inline-block; 
}

nav a {
  font-weight: 800;   /***can use "normal" "bold" or an actual number***/
  padding: 15px 10px; 
}

/*****************************
FOOTER
******************************/

footer {
  font-size: 0.75em; 
  text-align: center; 
  clear: both;
  padding-top: 50px; 
  color: #ccc; 
}

.social-icon {
  width: 20px;
  height: 20px;
  margin 0 5px;
}


/*****************************
PAGE PORTFOILO
******************************/

#gallery {
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

#gallery li {
  float: left; 
  width: 45%;   /**this 45%x2=90%, added to the margin of 2.5% x 2 x 2 below, total =100%***/
  margin: 2.5%; 
  background-color: #f5f5f5; 
  color: #bdc3c7
}

#gallery li a p {   /****when addressing id's, you can include everything within (list, anchor, paragraph, etc.) by doing this****/
  margin: 0; 
  padding: 5%; 
  font-size: 0.75em; 
  color: #bdc3c7;
} 


/*****************************
Page:About
******************************/

.profile-photo { 
  display: inline;
  max-width: 150px;
  margin: 0 auto 30px; 
  border-radius: 100%;  /***makes the piture circular***/
}


/*****************************
COLORS
******************************/

/* site body */
body {
  background-color: #fff; 
  color: #999; 
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599688;
}

/* nav background on mobile */
nav {
  background: #599688;
}

/* logo text */
h1, h2 {
  color: #fff; 
}

/* links */
a {
  color: #6ab47b; 
}

/* nav link */
nav a, nav a:visited {
  color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 7 · 2015-02-17T18:46:30Z

February 17, 2015 6:46pm

I can't figure out how to change the markdown like you did, lol.. I don't have a "backtick" button on my macAir

edit Looks like either it happened automatically, or you did it for me...

editIndeed...there it is! lol....

Answer 8 · 2015-02-17T18:53:12Z

February 17, 2015 6:53pm

Oh...I should say.... On the last CSS paste, the photo (under .profile-photo) indicates "display: inline;", but this is just me changing it from "display: block" (like nick has), trying to figure out what's going on relative to my initial problem. If I put "block" instead of "inline", the image moves to the top right of the page, and loses it's top corners (becomes flush with the top of the browser)...

Answer 9 · 2015-02-17T18:59:08Z

February 17, 2015 6:59pm

Okay, I think there are a couple things going on. First, nothing seems to be wrong when I try to reproduce the issue, as it works perfectly well in a pen. However, I did notice a few syntax issues.

First, you don't have your html, head, and body tags. The head tag is what contains meta information about your HTML document, and the body tag is what contains the webpage itself. The html tag wraps around the whole document. I'm not sure if that's what's causing your problem, but it's a good place to start.

Second, you have a syntax error in your CSS in the .social-icon rule. There needs to be a colon between the margin property and the rest of the declaration. CSS is a little weird with errors because they all degrade gracefully, which means that if you have an issue in one part of your stylesheet, it could have negative effects on a completely unrelated part.

Other than that, your original CSS looks good. It's just a couple issues with your HTML. I've posted a fixed copy of both below. If this still doesn't solve your issues, just reply back and we'll sort things out. :)

HTML

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <title>Daniel Thomas | Designer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <header>
      <a href="index.html" id="logo">
        <h1>Daniel Thomas</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/IMG_2092.JPG" alt="photgraph of Daniel Thomas" class="profile-photo">
      <h3>About</h3>
      <p>Greetings!  This is where you can find a bit of personal information about myself..  Not that I'm interesting or anything, but this is a test!</p>
      <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/danielwthomas3">@danielwthomas3</a>.</p>
    </section>
    <footer>
      <a href="http://twitter.com/danielwthomas3"><img src="img/twitter-wrap.png" alt="Twiter logo" class="social-icon"></a>
      <a href="http://facebook.com/danielwthomashomes"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
      <p>&copy; 2015 Daniel Thomas.</p>
    </footer>
  </div>
</body>
</html>

CSS

/*****************************
GENERAL
******************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
 max-width: 940px; 
 margin: 0% auto;
 padding: 0% 5%;  /***left margins is 1st value, right margin is 2nd value***/
}

a {
  text-decoration: none; 
}

img {
  max-width: 100%; 
}

h3 {
  margin: 0 0 1em 0;
}


/*****************************
HEADING
******************************/

header {
  float: left; 
  margin: 0 0 30px 0; /***top, then clockwise top/right/bottom/left***/
  padding: 5px 0 0 0; /***we add padding to add space w/o actually removing margin***/
  width: 100%; /***will make the image stretch across entire page***/
}

#logo{
  text-align: center; 
  margin: 0; 
}  

h1 {
  font-family: 'Changa One', sans-serif; 
  margin: 15px 0; 
  font-size: 1.75em; /***one 'em' is ~ 16 point font in size for non-headline font***/
  font-weight: normal; 
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em; 
  margin: -5px 0 0;  /*** top left/right bottom***/
  font-weight: normal;
}



/*****************************
NAVIGATION
******************************/

nav {
  text-align: center; 
  padding: 10px 0;
  margin: 20px 0 0; 
}

nav ul {
  list-style: none; 
  margin: 0 10px; 
  padding: 0;
}

nav li {
  display: inline-block; 
}

nav a {
  font-weight: 800;   /***can use "normal" "bold" or an actual number***/
  padding: 15px 10px; 
}

/*****************************
FOOTER
******************************/

footer {
  font-size: 0.75em; 
  text-align: center; 
  clear: both;
  padding-top: 50px; 
  color: #ccc; 
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/*****************************
PAGE PORTFOILO
******************************/

#gallery {
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

#gallery li {
  float: left; 
  width: 45%;   /**this 45%x2=90%, added to the margin of 2.5% x 2 x 2 below, total =100%***/
  margin: 2.5%; 
  background-color: #f5f5f5; 
  color: #bdc3c7
}

#gallery li a p {   /****when addressing id's, you can include everything within (list, anchor, paragraph, etc.) by doing this****/
  margin: 0; 
  padding: 5%; 
  font-size: 0.75em; 
  color: #bdc3c7;
} 


/*****************************
Page:About
******************************/

.profile-photo { 
  display: block;
  max-width: 150px;
  margin: 0 auto 30px; 
  border-radius: 100%;  /***makes the piture circular***/
}


/*****************************
COLORS
******************************/

/* site body */
body {
  background-color: #fff; 
  color: #999; 
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599688;
}

/* nav background on mobile */
nav {
  background: #599688;
}

/* logo text */
h1, h2 {
  color: #fff; 
}

/* links */
a {
  color: #6ab47b; 
}

/* nav link */
nav a, nav a:visited {
  color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 10 · 2015-02-17T19:06:42Z

February 17, 2015 7:06pm

Hi Daniel, can’t spot any Typos in your Mark-Up. Probably it is not working with the max-width property. You could also try the following declaration:

Edit: Ah okay Ryan already answered.

.profile-photo{
    display: block; /*Forcing the Element to occupy the whole space*/
    width: 200px; /* setting a fixed width unless a container does */
    height: 200px; /*setting a fixed height unless a container does, also ensures proportional measurements */
    margin: 20px auto; /* setting a top and bottom distance */
    border-radius: 100%; /* forcing a round ellipse */
}

keep me posted if it helps.

Answer 11 · 2015-02-17T19:07:44Z

February 17, 2015 7:07pm

Hi again... I'm not sure why the html, head, and body tags didn't reproduce on my initial copy/paste.. They are actually there, in the original document...

I have addressed the " : " issue within the .social-icon rule, but it's not correcting the profile image issue.

Is it possible that the workspaces interface is doing something here? It seems that the profile image, when I put "block" in the css code, wants to move/merge with the header. I wish I could paste an image so you could see it... :(

Answer 12 · 2015-02-17T19:14:08Z

February 17, 2015 7:14pm

Firefox 35.0.1

Answer 13 · 2015-02-17T19:20:54Z

February 17, 2015 7:20pm

I want you to take a look at this pen and see if it works there.

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Thomas

Daniel Thomas

Profile Image help...?

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

13 Answers

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

HTML

CSS

tobart

tobart

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas

Ryan Duchene

Ryan Duchene

Daniel Thomas

Daniel Thomas