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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Tyler _
Tyler _
6,651 Points
Posted by Tyler _
Tyler _
6,651 Points

About Page Image is Up on Nav Bar

After I added the CSS code for my About Page Image, the Image is now located up to the right of the NAV Bar. Not sure what I'm doing wrong. Here is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tyler Cornett | 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>Tyler Cornett</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </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>© 2015 Tyler Cornett.</p> </footer> </div> </body> </html>

Here is my CSS Code:

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

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

8 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Tyler, i don't see where the profile-photo class is specified in your html?

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

here is the about.html code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tyler Cornett | 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>Tyler Cornett</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 of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi, I'm Tyler Cornett and this is my design portfolio.  When I'm not working, I like to cycle, play drums, play guitar, and spend time in nature as much as possible.</p>
    <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com">@Tyler</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; 2015 Tyler Cornett.</p>
    </footer>
   </div>
  </body>
</html>
Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

here is the CSS Code:

/**************
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%;
}





/**************
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: right;
  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%;
}



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


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


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

/* nav background on mobile */
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;
}
Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

the image on About.html page is still showing up to the right of the top Nav bar. I can't figure out why.

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points 
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

If you look at this section of your css, i think it's your display: block attribute that's causing it to do that, try removing it or maybe try inline-block...it depends on where you want the image to end up being really!!

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

the lesson told me to put the code like that though.

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

okay i think i might have found your issue 

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

either removing the float: left or replacing it with display: block pushes the img element onto the next line.

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Tyler,

I've seen this problem before. Firefox shows a page without an image or with broken styles, but the page displays correctly in Chrome.

Here is a fix that you can add to your styles that will have no negative side effects.

#wrapper::before {
  content: "";
  display: table;
  clear: both;
}

This is called a Float Clearfix. If this doesn't make sense, that's OK. Just add this code to your CSS and it should fix the problem.

Hope this helps,

Cheers

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

Robert Richey, exactly where should I add that code? I tried adding it, saving it, and my image is STILL up against the NAV bar.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Add it anywhere inside main.css.

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

btw everyone, I still have a normalize.css file in my site. Is that o.k.?

I'm making the changes you are recommending on the main.css file.