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 How to Make a Website Adding Pages to a Website Build the Contact Page

Displaying images as inline

Hi;

As I was working on my web project; I noticed that if I change the images that I use,- which has different sizes than Nick's images- I cannot display them as inline. What should I do?

Thank you

7 Answers

hm I can not access that page. It says that the page does not exist.

Could you share your Workspace as a zip? So I could look into it in my own workspace? To do this go to File > Download WorkSpace in your Workspace window.

Then upload that zip somewhere, where it can be downloaded easily.

Could you post a link to your WorkSpace with these images?

What is your e-mail? I can send it to you directly by WeTransfer? I dont know how to send it to your treehouse account :)

send it to hello@saskialund.de

I've sent it. Vielen Dank fΓΌr ihre Freundlichkeit!

Ah ok I see the mistake.

You added the class "image" to the div that wraps your gallery code.

However in your CSS you are trying to assign all rules to the div.img instead of div.image There is no .img class anywhere in your html document.

Also there is no need to set the display value of an img to inline. Because it IS an inline item by default.

You need to set the float: left; declaration to the image containing list items.

EDIT: And there are a few more issues in your code:

you did not set the CSS rule for your universal selector. Add

* {
  box-sizing: border-box;
} 

to the very top of your CSS.

Then delete all the div.img related rules. You already declared rules for the list items and #gallery at the bottom of your CSS. So you can basically delete you first gallery part in the CSS.

Then scroll to #wrapper you forgot the length unit in the margin. add px to 10

#wrapper {
    max-width: 940px;
    margin: 10 auto;  /* px is missing from the 10 here. it should be 10px  */
    padding: 0 5%;
    z-index:inherit;
}

next, in your CSS code scroll to this part and correct it:

#gallery li {
  float: left;
  width: 48%;
  margin: 2.5%; /* change this to 1% , because 48% multiplied with 2per row equals 96%. so you have 4% for margins. there are 4 marginspaces available. 2 to the left and right of each list item. this equals 1% per margin */
  background-color: #C8BBBB;
  color: grey;
  padding: inherit;
}

next: Your images are of inconsistent height. This causes your gallery line up to break. So every third gallery item needs to be cleared left. So add this to your gallery CSS:

#gallery li:nth-child(3n) {
          clear:left;
}

Hope this helped. Saskia

Thank you Saskia; this was really helpful!