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 Jonathon Irizarry
Jonathon Irizarry
4,280 Points

Picture not fitting on the line with the other picture?

I have no idea on how to get the picture to fit in the same line as the other because their is a huge space of nothingness and I have messed around with the margin and widths of all the images and even made a seperate id with no luck. I will link what the page looks like from photobucket, my css and html as well. http://s1358.photobucket.com/user/Bkprodigy5150/media/Website_zps7ed79d11.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=0

http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart1_zps5fbd898e.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=1

http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart2_zpscaacee84.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=2

http://s1358.photobucket.com/user/Bkprodigy5150/media/Html_zpsa219a4b0.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=3

7 Answers

Mo Daka
PLUS
Mo Daka
Courses Plus Student 10,363 Points
Mo Daka
Mo Daka
Courses Plus Student 10,363 Points

Try this. 

<!DOCTYPE html>
<html>
  <!--This is the header-->
    <head>
      <meta charset="utf-8">
      <title> Justin Ranton | Creative | Digital PM | Web Designer </title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300|Roboto:400,300italic,300,500italic' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/swag.css">
      <link rel="stylesheet" href="css/responsive.css">
      <meta name="viewport" content="width=device-width, intial-scale=1.0">
    </head>

  <!--This is the body-->
    <body>
      <header>
        <a href="index.html" id=logo>
          <h1>Justin Ranton</h1>
          <h2>Creative | Digital PM | Web Designer</h2>
        </a>
        <nav>
          <ul>
            <a href="index.html" class="selected"><li>Work</li></a>
            <a href="about.html"><li>About</li></a>
            <a href="contact.html"><li>Contact</li></a>
          </ul>
        </nav>
      </header>
      <div id="wrapper">
        <section id="gallery">
          <ul>
            <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>

      <!--this is the footer-->
        <footer>
          <a href="http://www.twitter.com/jwranton"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
          <a href="https://www.facebook.com/justinranton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy; 2014 jwranton.pro | Privacy</p>
        </footer>
      </div>
    </body>
</html>

/******************************************************** GENERAL ********************************************************/ body{ Font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; }

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 */

logo {

text-align: center; margin: 0; }

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

h2 { font-family: 'Open Sans', sans-serif; margin: -5px 0 0; font-weight: normal; color: #ff0000 }

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

/******************************************************** 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 ********************************************************/

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

/******************************************************** FOOTER ********************************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/******************************************************** PAGE: Contact ********************************************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); } /******************************************************** COLORS ********************************************************/

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

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

nav { background: #599a68; }

h1, h2 { color: #fff; }

a { color: #6ab47b; }

/* nav link color */ nav a, nav a:visited { color: #fff; }

/* selected nav link color */ nav a.selected, nav a:hover { color: #32673f; } ...

Jonathon Irizarry
Jonathon Irizarry
4,280 Points
Jonathon Irizarry
Jonathon Irizarry
4,280 Points

Yea I tried to change up the code and try what you had coded in but nothing has changed the end results I wonder if I could possible just use the class or id selector on just one picture and somehow move it up with a command I tried making the picture smaller but nothing happened...

Michael Mahler
Michael Mahler
8,560 Points
Michael Mahler
Michael Mahler
8,560 Points

From the looks of it, it seems like the images are of different sizes- which is causing the 2nd line to be pushed down. You could fix this by specifying a height on your images (CSS), or by cropping them to a uniform aspect ratio before uploading. If you don't feel like doing either of those and are relatively experienced in javascript/jquery, you can check out the masonry plugin: http://masonry.desandro.com

Jonathon Irizarry
Jonathon Irizarry
4,280 Points
Jonathon Irizarry
Jonathon Irizarry
4,280 Points

Well I'm really new to coding and feel like their must be something I'm doing work and a solution to this! So I made all 4 pictures on the webpage the same size 1024x768 and it is the same result which really makes no sense since they are smaller pictures :(..... http://s1358.photobucket.com/user/Bkprodigy5150/media/Untitled_zps84dad3e3.png.html That's the link to the end result with different images plugged into the code that are all the same size.

Jonathon Irizarry
Jonathon Irizarry
4,280 Points
Jonathon Irizarry
Jonathon Irizarry
4,280 Points

I guess the answer to this simple question is 2 hard GG

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jonathon,

I answered a similar problem here: https://teamtreehouse.com/forum/my-workspaces-site-doesnt-quite-look-like-the-video-after-this-lesson-and-i-cant-see-why

See if that helps you.

The problem and solution should make more sense once you get to the responsive part of the course.

Jonathon Irizarry
Jonathon Irizarry
4,280 Points

The only way I see fixing this problem is later down the road when I figure out how to use javascript...

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

javascript should not be needed for this.

Just to be clear, I posted some css in that answer that is to be saved and not used until you get to the 3 column layout video that I linked to.

If you put the following into main.css then it should fix your current 2 column layout problem. (Add the nth-child part)

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

/* Add this */
#gallery li:nth-child(2n + 1) {
  clear: left;
}

If you save and refresh then that should fix what your screenshot is showing unless you have some other html or css problems.

Jonathon Irizarry
Jonathon Irizarry
4,280 Points

I have that exact code and used the validators for css and html I just wish I knew somebody to walk me through this via screen sharing. When I got to that part of the lesson I thought it would fix it and I even messed around with various nth-child inputs and none seemed to fix it or push the pictures into the right place with the declerations you have suggested.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

About all I can suggest at this point is to post your gallery html here and the css relating to the gallery from both main.css and responsive.css if you're at that point. Not the whole files just the gallery related parts and I'll take a look.

See this post for how to do that: https://teamtreehouse.com/forum/posting-code-to-the-forum

Jonathon Irizarry
Jonathon Irizarry
4,280 Points
Jonathon Irizarry
Jonathon Irizarry
4,280 Points

Yea I tried with the code you left for the nth child to clear before the nth child to the left. I just went on with the course and have just purchased a web domain and host for this project of mine and still see this problem which kind of makes my website look a little sloppy lol. Maybe we could skype and share screens and you could help a pal out?