Web Design Blog
Popular Posts
Categories
Creating a photo gallery in CSS without tables
Posted on Monday, March 31st, 2008 under CSS, web design news, XHTML 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?
Whats Next?
31 Responses to “Creating a photo gallery in CSS without tables”
About 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.
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?
Nice! But isn’t just float:left enough? Without the display:inline?
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 -
Its a nice technique to list your images using CSS.
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.
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.
Thank you. A very elegant solution, and xxactly what I was after. Not for an image gallery, but for my wallpapers.
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
?
hmmmm, I guess BBcode is off
….anyway, I was trying to show what happens if the second image (say) has a very long caption
thanks for this great tutorial. Im kind of used to using Tables but CSS is really so much more better.
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
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
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?
Hi Kim,
I’m having same problem as you, just wondered if you found a solution ?
Regards,
Paul.
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
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
I found your blog on Google. I’ve bookmarked it and will watch out for your next blog post.
DoH! Can I haz JS?
In you example, how do you make the bottom 2 cells center across the page?
Currently, they are left justified.
I’m having the same problem as paul and kim. Any solutions?
Paul, kim and dave already said it… Same promlem as Kim describes.
What to do?
@ 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!
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?
I like it, now we need to make this database driven
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
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.
i cant used it,,theres something missing,, the pop up image icant do it,, do you use the span?
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?
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??
SOLUTION insert in
INSERT in
Here ZIP with .JS
http://www.cabel.name/2008/02/fancyzoom-10.html
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