Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- CSS fix for the double margin float bug in IE6
- Popular fonts with their Mac OSX, Windows and Linux equivalents
Categories
Creating a photo gallery in CSS without tables
Posted on Monday, March 31st, 2008 under CSS, XHTML, web design news 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
Image Caption-
Image Caption
-
Image Caption
-
Image Caption
-
Image Caption
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?
15 Responses to “Creating a photo gallery in CSS without tables”
Leave a Reply
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 the 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.