Thumbnail Grid | WPDFD.com Forums

Schomer said:

10/26/04, 300 43 2004 2004:%i:1098837816 20:43:36

Hi All,

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.

Schomer

Stan said:

10/26/04, 300 27 2004 2004:%i:1098844048 22:27:28

This article from A List Apart might help.http://www.alistapart.com/articles/practicalcss/

Schomer said:

10/27/04, 301 14 2004 2004:%i:1098850453 00:14:13

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

Schomer said:

11/03/04, 308 24 2004 2004:%i:1099527881 19:24:41

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:

�

Here's my CSS:

div.float {
� � �float: left;
� � �margin: 6px;
� � �padding: 6px;
� � �border: solid 1px;
� � �width: 140px;
� � �height: 140px;
� � � �}
div.center-the-darn-image-somehow {
� � �text-align: center;
� � �vertical-align: middle;
� � � �}

Any ideas?

-Schomer

Kk5st said:

11/04/04, 309 32 2004 2004:%i:1099589566 12:32:46

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.

cheers,

gary

Schomer said:

11/04/04, 309 38 2004 2004:%i:1099597124 14:38:44

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!

- Schomer