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 Tom Lawrence
Tom Lawrence
8,685 Points

Problem with "how to make a website"

Hi,

I am following "how to make a website" and I am on the section where I am adding an about page, on this part of the course we add a picture on an about page and use CSS to center it and make it round.

When i add my HTML, the picture shows fine, and as expected (in the middle under the header) but as soon as I add the CSS to it, the picture hugs the top left of the browser (it should be still center)

Here is the CSS code I used ( i changed the class name, but it does match my img class..)

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

I have removed one line of CSS at a time and it is the display: block; causing the issue it seems as when i remove this, the picture goes back into the middle once more.

as CSS is cascading, here is the full CSS file if that helps:

/************************************************
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', cursive;
  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.75;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

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



  /*********************************************
PAGE: PORTFOLIO list style removes bullet points
************************************************/



#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 
************************************************/

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


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

/* green header*/

body {
  background-color: #fff;
  color: #999; 
}

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

/* logo text*/

nav {
  background: #599a68;
}

h1, h2 {
  color: #fff;
}

/* nav links*/

a {
  color: #6ab47b;

}

nav a, nav a:visited {
  color: #fff;
}

/* changes links within nav to a color when hovered over or using class "selected"*/

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

/* site body*/

Thanks in advance

Tom Lawrence
Tom Lawrence
8,685 Points

Here is the About HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tom Lawrence | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800|Changa+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Tom Lawrence</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/nick.jpg" alt="photograph" class="myphoto">
        <h3>About</h3>
        <p>Hi, welcome to my design portfolio where I share all of my work.</p>
        <p>If you would like to follow me on twitter, my username is <a href="http://www.twitter.com">@twitter</a></p>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2014 Tom Lawrence.</p>
      </footer>
     </div>
  </body>
</html>

7 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

The problem is that you made the img element display like a block, and by default block elements take up 100% of the page width. The reason the image isn't stretching is that you set its max width to 100% so it can't get any bigger than its original size. What you need to do is put your image in a wrapper div:

<div class="whatever"><!-- this is the wrapper div-->
    <img src="path/to/img.png">
</div>

then you need to:

.myphoto{
    display:inline-block;
}

Inline-block allows an element to have only as much width as it need, but still have top/bottom margins.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Sorry just looked over your css again. You need to put:

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

your header element is floated left.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

If you look at the next video he has this bit css posted below the video:

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

You are having problems because you changed the class of the image from "profile-photo" to "myphoto". You need to either change the class back in the html or find .profile-photo in you css file and change it to ".myphoto". Either way you need to clear the image or it will always float to the right side of the menu. My recommendation is still to clear the either #wrapper div. That way nothing from the content section will float to the right side of the menu

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

Hi, thanks for the reply, same issue though.

Here is a screenshot:

http://snag.gy/Eqpss.jpg (see how the picture has gone top right!)

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

Hello.

In the tutorial all I was told to do was delete everything from the index.html file (between the section tags) and then put in the img in between the now empty section tags, then in CSS set as above and the block was to give more control later (when working on desktop version)

If i put it in a div in it might cause problems later as I will have extra blocks not covered in the tutorial and ill just have problems then which I maybe cant fix as I am still quite new to this haha

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

5:30 into the video, you can see the wrapper DIV we got told to do at the start which is a DIV surrounding Section and Footer.

http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-a-new-page

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

THanks that fixed it, clear:both isnt in the project files though I just downloaded it and took another look. I take is CSS is easy to learn the basics, hard to m aster and a total nightmare to debug! :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> I take is CSS is easy to learn the basics, hard to master and a total nightmare to debug!

Pretty much.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Same for anything really, in my opinion!

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

Oh ok, must be a good idea to test websites on all browsers then for this reason!

Well all fixed now so thanks for your help.

So done some reading up on clear:both;

makes sence, it tells a block it cant have anything on either side so because of that is is pushed down! getting there.. haha