Dragan Babić is a designer guy who blogs on interface and information design, xhtml, css, usability, accessibility, user centric design and user experience and more.

CSS gallery layout—smells like a table 2006-09-24 15:07



Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right? If so, you already know that those kind of semantic gallery layouts require a lot of CSS code, and not a lot of these layouts are flexible enough – at least for my taste – so I decided to give it a go and I came up with a pretty robust solution that works in all modern browsers and it’s „behavior” resembles a what we could call a „table like behavior”.

The table effect

One of the things I like about tables is their flexibility to adapt to various widths, along with their cells always being distributed equally in rows retaining their grid structure. That is exactly what I wanted my gallery layout to possess — that native table cell-like fluidity and the ability to adapt to any container you put it in to.

The most common problem with floated list item gallery layouts is that they must be designed specifically for one width of the container, and if it changes the perfect grid layout will break.

The table effect I am referring to is exactly what this technique has provided, making it possible to have a semantic tableless thumbnail gallery layout in variable width containers.

Caveats

Obviously — things are not as perfect as we’d wish. This method requires certain restrictions to be made:

  1. Your thumbnails must be of fixed sizes – not that it is a really big problem, but in some cases it is. Nowadays many services and apps do this for the users (automatically re-size the uploaded images to predefined dimensions), but that kind of technology is not always at hand.
  2. There is no such thing as pixel perfection. Let me repeat that: there is no such thing as pixel perfection.
  3. You must figure out in advance how many columns you want your gallery to have, and that’s the number of columns it will always have, regardless of the width of the container. This is maybe not the most desirable behavior — theoretically we’d want the images to stack up one to another until there is space, and the margins to collapse in respect with the remaining space in the row, but this is still a Utopia for us. (Not so much anymore, see Kevin’s idea)

The set-up

For an example of this pure CSS thumbnail gallery layout I have set these parameters:

The code

First thing that we need to do is make our markup nice and semantic, here’s what we got: 

<ul class="gallery">
  <li><a href="#" title="Click for a bigger image"><img src="path/to/image/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
  <li><a href="#" title="Click for a bigger image"><img src="path/to/image/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
  .
  .
  .
  Rinse and repeat for sixteen images
</ul>

Now on to the CSS. 



.gallery{
          margin:0; padding:0;
          overflow:hidden; /* Clears the floats */
          width:100%; /* IE and older Opera fix for clearing, they need a dimension */
          list-style:none;
        }
          .gallery li{
            float:left;
            display:inline; /* For IE so it doesn't double the 1% left margin */
            width:23.8%;
            margin:0 0 10px 1%; padding:10px 0;
            height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
            position:relative; /* This is the key */
            background:url(45degree.png);
          }
            .gallery a,
            .gallery img{
              display:block;
              width:100%;
            }


            a img{ border:none; } /* A small fix */

            .gallery a:link,
            .gallery a:visited,
            .gallery a:focus,
            .gallery a:hover,
            .gallery a:active{
              padding:3px;
              background:#eeefef;
              width:75px; height:75px;
              border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
              position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
              margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
            }
            .gallery a:hover{
              border-color:#dfdfdf;
            }

            /* These are all optional, for decoration purpouses only */
            .gallery{
              border-bottom:2px solid #000;
              padding-bottom:10px;
              margin-top:10px;
            }

As you can see, it is a very simple little trick, but the result is really effective. In case you don’t want to go through the comments in the CSS, here’s the breakdown:

  1. We strip out the list bullets and float the list items giving them appropriate dimensions (widths and heights). We have cleared the floats with the very convenient overflow:hidden rule, keep in mind that Internet Explorer and Opera require an additional rule – a dimension (width or height) explicitly set in order to clear out the floated child elements.
  2. The next thing we do is set position:relative to the list items, so we can freely position it’s child elements absolutely relative to it (namely the link containing the image).
  3. The link is then positioned absolutely with top:50%; left:50% coordinates.
  4. Obviously this sets it’s top left corner in the center of the list item, and that’s not exactly what we want, so we pull the link (and the image) into position with a little help of negative margins and as you can see in this example – it works perfectly.

2006-09-24 15:07; 15 comments

  1. Kevin on 28/09/06 06:32 PM comments:

    I made something similiar to this a while ago and used a really neat javascript trick to enhance it. Using Resolution dependent layout, you can have each row contain more or less columns depending on browser width. It’s a simple script that really helps adapt to different browser widths. Put your biggest width for ‘cells’ in your main css file (for lower resolutions), then include smaller widths for ‘cells’ in a seperate css file (for higher resolutions). Let’s see tables try that one.

  2. Dragan Babić on 28/09/06 08:06 PM comments:

    That is an excellent idea Kevin! I know of RDL technique but I’d never had thought of using it in this scenario. Our Utopia doesn’t feel so much like an Utopia now. :)

  3. Matthew Smith on 29/09/06 09:23 PM comments:

    I don’t really understand the point here. There is nothing semantically incorrect about laying the gallery out using a table. The idea behind the CSS, semantic-layout movement is to use HTML tags for their intended purpose. If something looks and behaves like a table, then use a table. My 2cents.

  4. Dragan Babić on 29/09/06 09:32 PM comments:

    Well Matthew I don’t really consider images to be tabular data, so there is your semantic inconsistency. I have always seen an image gallery as a list of images, and it’s your job to make of that list what is needed, to present it in the most convenient way for user’s viewing pleasure – that is usually where the grid comes in. The fact that tables retain their grid structures no matter what, or because it is their default behavior shouldn’t lead you to think the table is the right element for the job.

    Just think of the “big and bold” situation – When you want big and bold lettering you don’t use an h1, you use CSS to present the appropriate element (most probably a strong ) in the manner you have imagined.

  5. Matthew Smith on 30/09/06 05:44 PM comments:

    Semantics are definately a matter of opinion. I was just trying to make a point that sometimes developers go out of there way to remove tables, when a table might make the most sense.

  6. Dragan Babić on 30/09/06 05:49 PM comments:

    You are absolutely correct on that one, and I agree with you, and let me quote myself from another article from this blog:

    I’m am an advocate of Web standards, but I am an even bigger advocate of making sense of things…
    ... Don’t spend hours trying to design a specific tableless layout just so it would be tableless. Think about what information you are presenting on the page, where does what belong, and how should you present it. If something is clearly tabular data (e.g. a comparison, or any other chart) you should use a table to present it with.

  7. Stephen on 14/10/06 11:40 AM comments:

    This is very nice, very useful. One thing that I might do to enhance the code is to set the min-width rule, depending on the size of the thumbnails used, to the ul element so that images don’t overlap if constrained too much. I realize that this isn’t widely supported but it’d be nice for those browsers that it works in.

  8. anada on 21/10/06 06:58 AM comments:

    The CSS Gallery gives a good solution to WP when editing thumbs without using tables. I’m using the codes provided here on my blog and it looks perfect!

    thank you, Dragan!

  9. Aleksandar on 20/11/06 10:12 AM comments:

    Works nice if you have thumbs of the same size. If they are not, things will inevitably fall apart. I am still looking for solution there, currently experimenting with display:table-cell

  10. Dragan Babić on 20/11/06 02:28 PM comments:

    @ Aleksandar:
    Yeah, that’s one of the shortcomings of this technique, but I guess it’s not that hard to compensate for it nowadays with a little bit of server side magic that would make all thumbnails square.

    I have always kept myself away from display:table-cell, or any other display property that is not block or inline for that matter. :)
    I am just not comfortable with all that IE trickery.

  11. Ted on 17/01/07 10:14 AM comments:

    You know, just changing the width of the list item from 23.8% to 75px makes for a rather nice, flowing gallery.

  12. Dragan Babić on 17/01/07 10:52 AM comments:

    @ Ted: Yes, but we are losing the „table effect” (the stretching of the grid in liquid layouts), and that was the whole point. :)

  13. Jeff on 23/01/07 11:44 PM comments:

    Dragan, great little tutorial/article on how to easily make a CSS image gallery. In the midst of trying to implement it on my website (site for my band, Chet), and I originally had the page set up as a table as a static page outside of my wordpress install. I’ve since decided to move it within wordpress for ease of management & simplicity, but unlike your gallery, I’d like it to have 3 rows of 100×100px thumbnails. Got them to be 100px, but I’m a little puzzled by how you positioned the rows to have 4 images each (as I’d, rather obviously, like to change it to show 3 images per row.) Can you offer an help?

  14. Jeff on 23/01/07 11:52 PM comments:

    Wait, nevermind, figured it out; it’s the width: 23.8% property

  15. sion on 22/02/07 04:14 AM comments:

    This was just what I was looking for.I was actually just about to try a li-type thumbnail gallery for a sort of catalog book page solution when I came across your site.
    Thanks for making my life a heck of a lot easier.
    I know I know I am not using it 100 percent correctly I am using the ul class as a div in itself,too.I tried it the correct way and I liked the results better the “wrong” way.
    Oh well!

Comments are closed for this article

Syndication

The best practices in interface design straight in your feed reader. It's all there and powered by feedburner.

Grab the feed, stay informed.

activeCollab.com

Previously

Getting around

Resources