Creating a photo gallery in CSS without tables

I have received several emails recently about creating galleries with CSS. Most people still use tables to create your basic image gallery in CSS. There is a much simpler way to do this with a list and some very easy CSS. Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page. This simple method can be expanded for use on staff pages or real estate sites to list houses for sale.

The methodology is to put each image and subsequent text into an <li> and then manage the text inside just as you would any other HTML structure. The important part is getting the CSS to manipulate your list to the image gallery form.

The simple HTML to structure the photo gallery

 
<ul class="gallery">
        <li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
        <br />Image Caption</li>
        <li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
        <br />Image Caption</li>
        <li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
        <br />Image Caption</li>
        <li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
        <br />Image Caption</li>
        <li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
        <br />Image Caption</li>
</ul>

The simple CSS to style the gallery’s HTML

.gallery li {
        display: inline;
        list-style: none;
        width: 150px;
        min-height: 175px;
        float: left;
        margin: 0 10px 10px 0;
        text-align: center;
	}

Now with all of the code working together


Other ways to style your image gallery without tables

You can also use a div to create your photo gallery instead of using a list. It works much in the same way that using a list does, some prefer this method over using a list. I will typically use a list because I feel it is more semantically correct than using a div. Anyone else use a different method to create a photo gallery than these two methods?

Whats Next?

  • Save to Delicious! Page saved 0 times
Both comments and pings are currently closed.

31 Responses to “Creating a photo gallery in CSS without tables”

  1. I always used some ready solutions. Browsing the net today I found galleria and I’m gonna test it. Looks really great.
    BTW: Don’t you use “title” tags in your images?

  2. Fabian says:

    Nice! But isn’t just float:left enough? Without the display:inline?

  3. Wakish says:

    Dustin, it’s a cool explanation..

    @Fabian:
    No, you have to include the “display:inline”, that’s what really make the trick here. If you don’t put it, your images will be displayed in a listed fashion, that is one below the other..etc

    Yours,
    - Wakish -

  4. Blog Opinion says:

    Its a nice technique to list your images using CSS.

  5. Sean Farrell says:

    This is a great technique that I’ve been using for a while now. One thing to mention regarding the right margin is this sometimes throws the design off if you want the images to go right to the edge of the right, so i’ll just throw a class on the far right image with a margin-right:0; and make sure the images + padding on everything is equal to the width of the site.

  6. Ryan says:

    I having touble with image size it’s huge not working? plus I don’t know about the _tn.jpg that may be my problem. Also how can I make it go back the gallery page after they click on it? Can’t I add a href tag to the window that opens that says return to gallery? would make for easier navagation. I tried just using the img src without the href that’s where my image doesn’t size right. takes most of the page. Any ideas?

    The concept was great thanks, I’m just new at this and trying to your example as part of my individual project for my HTML class.

    Thanks.

  7. johno says:

    Thank you. A very elegant solution, and xxactly what I was after. Not for an image gallery, but for my wallpapers.

  8. s says:

    It seems this technique doesn’t work if the combined height of the thumbnail and caption is more than 175px. Try this as an extreme example and narrow the browser so it forces the thumbnails onto 2 rows:

    [code]


    Image Caption

    Image CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage CaptionImage Caption

    Image Caption

    Image Caption

    Image Caption

    [/code]

    You *could* enclose the image and caption in a div, and give the div a height but that gets into cross browser problems and will either put in scroll bars (overflow:auto) or clip the content (overflow:none)

    Any thoughts of ways round this (other than using a TABLE of course :) ?

  9. s says:

    hmmmm, I guess BBcode is off

    ….anyway, I was trying to show what happens if the second image (say) has a very long caption

  10. space code says:

    thanks for this great tutorial. Im kind of used to using Tables but CSS is really so much more better.

  11. rakeback says:

    wooo. this is a great tutorial. its been quite some time since i manually edit my css. used to do that during our college projects :)

  12. John says:

    I wish I’d seen this tutorial before I made the image gallery on corewar.co.uk – it would’ve made it so much easier.

    John

  13. Kim Bui says:

    Hi Dustin, I tried this out and it didn’t work for me. All I did was copy and paste and yet it does not do what your images do (float up and appear larger on the same screen). Mine will only open to a blank page when you click on the thumbnail. Is it suppose to do that?

    • Paul says:

      Hi Kim,

      I’m having same problem as you, just wondered if you found a solution ?

      Regards,

      Paul.

  14. Reiki says:

    Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.

  15. stu says:

    Can you please let me know what js files i will need to have the image pop up?

    It seems to me it’s both
    FancyZoom.js & FancyZoomHTML.js, but it’s still not working fro me. Curious why you didn’t mention the js file in this very helpful and great article.

    thanks

    stu @ b e s t u n g .c o m

  16. Reiki Tutor says:

    I found your blog on Google. I’ve bookmarked it and will watch out for your next blog post.

  17. bornkiller says:

    DoH! Can I haz JS?

  18. George says:

    In you example, how do you make the bottom 2 cells center across the page?

    Currently, they are left justified.

  19. dave says:

    I’m having the same problem as paul and kim. Any solutions?

  20. petra says:

    Paul, kim and dave already said it… Same promlem as Kim describes.

    What to do?

  21. Rick says:

    @ those wondering why the images don’t enlarge all pretty on your test page like Dustin’s, you must add fancyzoom.

    It’s quite simple, just go to:
    http://www.cabel.name/2008/02/fancyzoom-10.html

    Thanks for the insight Justin!

    • Ken says:

      This page is very misleading. The explanation completely leads one to believe this is a CSS only method. Only after spending much time failing to get it to work and finally reading the blog does someone learn you actually need FancyZoom. Why after 2yrs haven’t you updated the main content with this requirement?

  22. I like it, now we need to make this database driven

  23. Tom says:

    How do I get the zoomed image to always be on top of other content? I have a div next to the div with the gallery, and the zoomed image pops up, but partly under another div’s content.

    Thanks

  24. conner says:

    Mine didn’t space them out but thats not the problem. How do you make the image appear in that screen where its faded black in the background and the images is bigger. I need to know this for my school website. And not just images, like the same look but have a scroll bar maybe.

  25. ashvag says:

    i cant used it,,theres something missing,, the pop up image icant do it,, do you use the span?

  26. kathryn says:

    The thumbnail images are working. But once I click on it, the page just goes to a blank page. How do i get it so that it pops up like yours?

  27. Scott says:

    When you click on the image in the example, a nice frame appears right on the screen. When I click it on my site, it opens the image in a separate window. How can I get it to do the same thing as above??

  28. Alejandra Mendez says:

    SOLUTION insert in

    INSERT in

    Here ZIP with .JS

    http://www.cabel.name/2008/02/fancyzoom-10.html

  29. Alejandra Mendez says:

    SOLUTION insert in “HEAD js files”

    INSERT in “BODY id=”whatever” [...] onload=”setupZoom()”

    Here ZIP with .JS and code

    http://www.cabel.name/2008/02/fancyzoom-10.html


About Dustin Brewer

Dustin Brewer

Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout my web design portfolio.

Contact Information

Contact, interact or keep in touch through any or all of the methods listed below.

Today's popular articles

© 2010 Dustin Brewer Design. All Rights Reserved.
Located in Oklahoma City, OK 73170, Phone Number: 405-308-4300