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.

CSS How to Make a Website Adding Pages to a Website Style New Pages

Profile Image stuck at top-right of page when adding display: block;

Hi guys, glad to be here and have my first question.

I'm currently working through the 'How to Make a Website' series and have come undone at the 'Style New Pages' section.

My problem is that whenever I add a block value to the display property it forces the image into the upper right of the page. See css below:

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Now I can take "display: block;" out and the image appears under the header/nav as opposed to to the top-right of it, which is great, but the problem is it still sits in the default left position and needs centering. I could find a means of centering it without display: block; but I don't want to shoot myself in the foot. I believe I've followed along with the tutorial/lessons down to a tee, so this has stumped me.

Hopefully I'm explaining it right - supernoob with only a days experience and all that

I've attached the full css markup below for further reference.

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

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

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;  
}



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

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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


h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  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;
  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 PORTFOLIO
************************************************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  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%;
}



/************************************************
COLOURS
************************************************/

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

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

/* nav background on mobile devices */
nav {
  background: #599a68;
}

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

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

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

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

7 Answers

The fix for this is actually in the teachers notes.

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

Heh, I really need to pay closer attention. Thanks again Dustin!

Anytime it happens to all of us :)

In Firefox for me the image wouldn't show until I set display: inline-block; but it wasn't centered. You can try some of the solutions here for that if you like.

Strange. I have noticed that the normalize.css file I had was v 1.0 and have upgraded is to v 3.1 on the off chance it might make a difference and knock Firefox into shape. However, after inspecting elements in FF and removing the image, Firefox doesn't seem to want to refresh and show me the page with the image, so I can't see if it's made a difference yet. Cleared cache, the image-less page persists. And to think I used to like Firefox - I feel betrayed! ;)

Going out for dinner soon so will have a better look when I return.

Appreciate the help all.

lordcozycat
lordcozycat
11,940 Points

Can you add your HTML for the about.html page? Also: wrap your css code in the 3 backtick characters. 3 on each side of your code. This will make it easier to read and understand :)

I'm not seeing an issue with your recent update. Before there were several missing # symbols. The only thing I'm able to notice is a missing colon from one of your code blocks but I don't think that is the issue.

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em; /* added colon to font-size */
  color: #bdc3c7;
}

Hi, think I've fixed it so its easier to follow and below is (or should be) the html for about.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Christopher Mason | Website Design and Development</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>Christopher Mason</h1>
        <h2>Website Design and Development</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/images.jpg" alt="Photograph of funny dude." class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Christopher Mason! This is my design portfolio where I share all of my favourite work. When I'm not designing things, I enjoy playing video games, watching Breaking Bad, writing generic About Us pages, and more.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com">@FakeTwitter</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 and beyond Christopher Mason.</p>
      </footer>
    </div>
  </body>
</html>

Thanks Dustin. I think in the process of pasting the code it didn't paste over correctly as I have the colon on my document.

Just an update. I thought I'd try the page in Chrome and Opera (Firefox) is my preference, and in both browsers it loads fine.

If one of you could try http://web-fu35zpn1st.treehouse-app.com/about.html on your Firefox and let me know whether it loads on yours or not that would be great. It may well be that my Firefox has some crap installed on it which is interfering with the page?

Chris

lordcozycat
lordcozycat
11,940 Points

That page shows up perfectly in Chrome :) It could simply be that Firefox is applying something in the stylesheet that's not covered by normalize or your main.css

lordcozycat
lordcozycat
11,940 Points

So I've loaded both your HTML and CSS onto my own computer, and in Chrome at least, the image appears right in the center. With and without normalize. Everything is as should be.

The only ideas I have are that you could inspect element in Chrome or Firefox, and maybe you'll see the specific issue. Good luck.