About Page Image is Up on Nav Bar

Question

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:

Answer 1 · 2015-03-23T15:24:41Z

March 23, 2015 3:24pm

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

Answer 2 · 2015-03-23T16:28:15Z

March 23, 2015 4:28pm

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>

Answer 3 · 2015-03-23T16:30:18Z

March 23, 2015 4:30pm

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;
}

Answer 4 · 2015-03-23T16:36:07Z

March 23, 2015 4:36pm

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

Answer 5 · 2015-03-23T16:44:50Z

March 23, 2015 4:44pm

.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!!

Answer 6 · 2015-03-23T16:47:21Z

March 23, 2015 4:47pm

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

Answer 7 · 2015-03-24T16:33:30Z

March 24, 2015 4:33pm

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

Answer 8 · 2015-03-27T17:22:16Z

March 27, 2015 5:22pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Tyler _

Tyler _

About Page Image is Up on Nav Bar

Tyler _

Tyler _

8 Answers

Grace Kelly

Grace Kelly

Tyler _

Tyler _

Tyler _

Tyler _

Tyler _

Tyler _

Grace Kelly

Grace Kelly

Tyler _

Tyler _

Grace Kelly

Grace Kelly

Robert Richey

Robert Richey

Tyler _

Tyler _

Robert Richey

Robert Richey

Tyler _

Tyler _