Creating a photo gallery in CSS without tables
March 31st, 2008 by Dustin Brewer
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
Image Caption
Image Caption
Image Caption
Image Caption
Image Caption
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?
Popularity: 10%
April 3rd, 2008
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?
April 6th, 2008
Nice! But isn’t just float:left enough? Without the display:inline?
April 7th, 2008
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 -
April 12th, 2008
Its a nice technique to list your images using CSS.
April 13th, 2008
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.
April 20th, 2008
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.
April 22nd, 2008
Thank you. A very elegant solution, and xxactly what I was after. Not for an image gallery, but for my wallpapers.
April 28th, 2008
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 :) ?
April 28th, 2008
hmmmm, I guess BBcode is off
….anyway, I was trying to show what happens if the second image (say) has a very long caption
May 20th, 2008
thanks for this great tutorial. Im kind of used to using Tables but CSS is really so much more better.
May 21st, 2008
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 :)
July 15th, 2008
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