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

Posted by Josh McMullin
Josh McMullin
3,012 Points

Floating individual images for an image gallery.

I'm currently working on building an image gallery and want to layout the photos with CSS in a bit of an unorganized manner. I've got a markup of what I'm looking to do here - http://www.gliffy.com/go/publish/6976777. Is there a best way to go about this?

3 Answers

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

If you'd like to use float, you can use margins to help you align each photo slightly differently within your page. Just make sure to keep collapsing margins in mind as you do this.

For example, if your html for your images looked like this:

<ul>
  <li><img src="photo-1.jpg" alt="" /></li>
  <li><img src="photo-2.jpg" alt="" /></li>
  <li><img src="photo-3.jpg" alt="" /></li>
</ul>

You might do something like this in your CSS:

ul { list-style-type: none; }
li, img { float: left; }
li img[src="photo-1.jpg"] {
  width: 100px;
  height: 100px;
  margin: 10px 20px 30px;
}
li img[src="photo-2.jpg"] {
  width: 100px;
  height: 100px;
  margin: 0 20px 40px 0;
}
li img[src="photo-3.jpg"] {
  clear: left;
  width: 200px;
  height: 100px;
  margin: 10px auto;
}
Josh McMullin
Josh McMullin
3,012 Points

So this is what I have for my HTML -

<ul id="gallery"> <li> <img src="img/flowers0.jpg" alt="flower">
</li> <li> <img src="img/flowers1.jpg" alt="flower"> </li> <li> <img src="img/flowers2.jpg" alt="flower"> </li> <li> <img src="img/flowers3.jpg" alt="flower"> </li>

            <li>
                <img src="img/flowers4.jpg" alt="flower">   
            </li>
            <li>
                <img src="img/flowers5.jpg" alt="flower">
            </li>
            <li>
                <img src="img/flowers6.jpg" alt="flower">
            </li>
            <li>
                <img src="img/flowers7.jpg" alt="flower">
            </li>
        </ul>
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

If you want flowers3 to start on a new line, you'll have to apply the clear:left to the li. Unfortunately, since there are no parent selectors in CSS, that will make your html a little dirtier (or, you're going to need to add some javascript).

Assuming the absence of javascript, your html will need to look something like this:

          <ul>
            <li class="flower rose">
                <img src="img/flowers0.jpg" alt="flower">   
            </li>
            <li class="flower daisy">
                <img src="img/flowers1.jpg" alt="flower">
            </li>
            <li class="flower tulip">
                <img src="img/flowers2.jpg" alt="flower">
            </li>
            <li class="flower bird-of-paradise">
                <img src="img/flowers3.jpg" alt="flower">
            </li>
            <li class="flower callalilly">
                <img src="img/flowers4.jpg" alt="flower">   
            </li>
            <li class="flower carnation">
                <img src="img/flowers5.jpg" alt="flower">
            </li>
            <li class="flower daffodil">
                <img src="img/flowers6.jpg" alt="flower">
            </li>
            <li class="flower gardenia">
                <img src="img/flowers7.jpg" alt="flower">
            </li>
        </ul>

And then something like this for your css:

gallery {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.flower, 
.flower img { float: left; }

.flower img {
  width: 100%; 
  height: auto; 
}

.tulip,
.bird-of-paradise { clear: left; }

.flower img[src="img/flowers0.jpg"] { 
  margin: 10px 20px 30px; 
}

.flower img[src="img/flowers1.jpg"] {
  margin: 0 20px 40px 0; 
}

.flower img[src="img/flowers2.jpg"] { 
  margin: 10px auto;
}

.flower img[src="img/flowers3.jpg"] { 
  margin: 40px 10px 1px 5px;
}

I noticed that you had some .. preceding your URI path for flowers2.jpg which I removed. I also refactored a bit.

I haven't actually tested this to make sure it works, but it should get you going along the right path.

If you want to make use of the parent selector in javascript, take a look at this post for plain 'ol javascript or this page for jQuery.

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

And for my CSS -

gallery {

display: block;
margin: 0;
padding: 0;
list-style-type: none;

}

li, img { float: left; }

li img[src="img/flowers0.jpg"] { width: 100%; height: auto; margin: 10px 20px 30px; }

li img[src="img/flowers1.jpg"] { width: 100%; height: auto; margin: 0 20px 40px 0; }

li img[src="..img/flowers2.jpg"] { clear: left; width: 100%; height: auto; margin: 10px auto;

}

li img[src="img/flowers3.jpg"] { clear: right; width: 100%; height: auto; margin: 40px 10px 1px 5px;

}

Josh McMullin
Josh McMullin
3,012 Points

I'm having trouble with the img/flowers3.jpg I can't get it to start below img/flowers2.jpg. Any ideas?

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

Thanks for all the feedback everyone. I really appreciate the help.