Layout: Thumbnail Gridstarted by Schomer on Oct 26, 2004 — RSS Feed
I'm looking for an easy CSS solution to creating a page with a thumbnail (image) grid in the middle.
Any suggestions, examples, etc.?
Thanks in advance for any help.
This article from A List Apart might help.http://www.alistapart.com/articles/practicalcss/
Thanks for the link. That appears to be exactly what I'm looking for! There is also some info there about Forms layout, which looks useful as well. Thanks again. - Schomer
Hi, I was able to float the boxes left and they make a nice grid layout - columns/rows. The problem I have now is getting an image inside them to be centered vertically. I can use text-align: center to get them centered horizontally, but I don't know what to use to get them centered vertically.
Maybe I'm missing something really easy...
Here's my HTML:
<img src="images/image1.jpg" width="100" height="100" /><br />
Here's my CSS:
border: solid 1px;
I made an image centering demo a while back. It is a css/table hybrid. CSS doesn't offer an equivalent to valign*, so a single celled table seems a sane method.
*Don't be confused by the vertical-align property. That affects alignment within the line box and does not apply to block elements.
Using a table makes sense. And normally, I think it would be a fine solution. However, I'm really trying to put my HTML together in such a way that a style sheet could change the layout of the page - where the HTML doesn't contain any layout info.
I'm making an export-to-HTML feature in a software product of mine, and would like people to be able to choose/create CSS docs to go along with it, to change it all around - kind of like the CSSZenGarden.com idea... I'd like to export the HTML files, and then export a folder with the CSS doc and accompanying images to create the "site." All the user has to do to change the site appearance is choose a different style from a pop-up menu, and it will copy a different folder with a different CSS doc and images to the site.
Okay, probably too much information. Anyway, since these users are going to be dealing with thumbnail images all the time, it might be fine to put a table in there for each one.
Thanks for the advice and sample page on your site!
You must login to reply