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

General Discussion

Posted by chris salvi
chris salvi
7,584 Points

About page img stuck in wrong place!

I am doing the web design track, and have followed everything to a T, but something is weird because my About img is hanging out at the tail end of the header. I posted my css below for reference.

/*******************
GENERAL STYLING
********************/
body {
  font-family: 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: 5p 0 0 0;
  width: 100%;
}


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

h1 {

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

h2{
  font-size:0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}




/*******************
  Navagation
********************/
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: 15p 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: 20%;
}


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


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


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

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

/*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;
}
chris salvi
chris salvi
7,584 Points

http://i.imgur.com/2GntHH0.png

chris salvi
chris salvi
7,584 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chris Salvi | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700|Roboto+Slab:700,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Chris Salvi</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/chris.jpg" alt="Image of Chris Salvi" class="profile-photo">
        <h3>About</h3>
          <p>Aspiring web designer and programmer looking for creative work. This is my design portfolio where I share all of my      favorite work and projects. I enjoy photography and tennis in my spare time.</p>
          <p>If you'd like to follow me on Twiiter my user name is <a href="http://twitter.com">@Donsalvadori</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 Chris Salvi.</p>
      </footer>
      </div>
  </body>
</html>

5 Answers

ryankite
ryankite
8,265 Points
ryankite
ryankite
8,265 Points

not sure if this is the fix for your problem as I can't see the HTML, but I think there are two small typos that if corrects may help a little: Change the 'p" to 'px' on these two elements and see if that does anything.

header{
  padding: 5p 0 0 0;
}

nav a {
  padding: 15p 10px;
}
chris salvi
chris salvi
7,584 Points

nope didnt fix it, but did fix a minor styling error. Thanks for suggestion.

chris salvi
chris salvi
7,584 Points
chris salvi
chris salvi
7,584 Points

Also I noticed that the picture only does this after I start styling the class .profile-photo. Before I style it everything works fine.

ryankite
ryankite
8,265 Points
ryankite
ryankite
8,265 Points

try adding a clear fix to your .profile-photo class

.profile-photo{
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 20%;
  clear:both;
}
chris salvi
chris salvi
7,584 Points
chris salvi
chris salvi
7,584 Points

that worked ryan. Do you mind describing really quickly how clear works? I thought my header was automatically taking up all the space above anyways.

ryankite
ryankite
8,265 Points
ryankite
ryankite
8,265 Points

Basically, by stating clear:both - we are saying do not allow any elements on either side of the object. Here is link to some more literature on that http://www.w3schools.com/cssref/pr_class_clear.asp