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

Posted by Becky Pearson
Becky Pearson
434 Points

Web Design Course - Stage 7 help

I'm at stage 7 of the web design course - adding new pages.

I'm trying to add a profile photo at the top of the 'about' page. For some reason the photo keeps coming up underneath the text. Not sure what I'm doing wrong?

<section> <img src="img/nick.jpg"alt="photograph of nick"class="profile-photo">

  <h3>About</h3>
  <p>Welcome to So Hum creative agency.</p>

  <p> I'f you'd like to follow us on twitter, our usersname is <a href="http://www.twitter.com/beckpearson"> @beckpearson</a></p>

  </section>
Rich Bagley
Rich Bagley
25,869 Points

Hi Becky,

Can you post your CSS too please and we'll take a look at what's happening?

Thanks

-Rich

Becky Pearson
Becky Pearson
434 Points

/************ ABOUT PAGE *************/

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

Rich Bagley
Rich Bagley
25,869 Points

That CSS looks fine. What CSS are you using for the h3, p and section tags?

Thanks

-Rich

Becky Pearson
Becky Pearson
434 Points

Hi Rich,

Thanks for having a look. I'm not sure - I don't think I understand your question sorry, I don't think I am using CSS for the h3, p and section tags?

Rich Bagley
Rich Bagley
25,869 Points

Hi Becky,

No problem.

Are you using other CSS which may affect the layout? If the image is appearing below the text it's likely that another style is affecting this, possibly through a position style or something similar.

One quick test would be to remove the style you've posted:

/************ ABOUT PAGE *************/

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

If you remove this, does the image appear above the text again? If so, your issue is with this style. If not, it's likely another style that's causing it.

If you're able to post any other CSS that would be great.

Thanks

-Rich

6 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Becky Pearson,

It sounds like you're using the Firefox web browser. If you're using Firefox, you'll need to follow the instructions in the teacher notes for (this video)[http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/style-new-pages] to make it work properly.

I hope that helps. If not, reply here and we'll work through it some more. :)

Becky Pearson
Becky Pearson
434 Points

Aha! Thank you so much! It seems my facebook and twitter pics are not not working in my footer as they were before but I will try to work this one out!

Becky Pearson
Becky Pearson
434 Points
Becky Pearson
Becky Pearson
434 Points

Hi Rich,

Yes, If I remove that then the image and text are where it should be (with the images above the text) but then of course my images isn't aligned properly or as a circle rather than a square (which is what I was trying to do with the CSS.

Why did this happen, do you know?

Dave Abalos
Dave Abalos
6,976 Points
Dave Abalos
Dave Abalos
6,976 Points

I would suggest to review your syntax in your CSS and make it sure that all in the right place that you are trying to make. If you can post your CSS the community might give you an exact answer.

Becky Pearson
Becky Pearson
434 Points
Becky Pearson
Becky Pearson
434 Points

Hi Dave,

Yes it must be. I can't seem to find the error!

/************
GENERAL
*************/
body {
font-family:'Lato', 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: 'Lato', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-family: 'Lato', sans-serif;
  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: #cccccc;
    color: #cccccc;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #cccccc
}




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

/* pink header */
header {
  background: #ccccff;
    border-color: #ccccff;
}

/* logo text */

h1, h2, {
  color: #fff;
}

  /* nav background */
nav {
  background: #ccccff;
}



/* links */

a {
  color: #ffcccc;
}


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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #ffcccc;
}
Rich Bagley
Rich Bagley
25,869 Points

Hi Becky,

Sorry for the delay. I'm not sure of the issue yet but can you try editing your post above to include 3 backticks (```) on the line before and 3 backticks on the line after the code you pasted in please?

This will then display the code like this:

.my-class {
...these are my styles...
}

It just might make the issue stand out a little more that's all.

Thanks

-Rich

Becky Pearson
Becky Pearson
434 Points
Becky Pearson
Becky Pearson
434 Points

Thanks for pointing this out, should be much easier to view now

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Becky,

This might be nothing and just the way that the snippet has rendered but I noticed the image tag is displaying as the following (no spaces between attributes):

<img src="img/nick.jpg"alt="photograph of nick"class="profile-photo">

Can you try what you originally had but with this tag instead:

<img src="img/nick.jpg" alt="photograph of nick" class="profile-photo">

As I said it could be nothing but worth a try :)

EDIT: If that doesn't work I notice you have a closing section tag. Do you have an opening one?

</section>

Thanks

-Rich