Layout: Thumbnail Grid

started by Schomer on Oct 26, 2004 — RSS Feed

Schomer Schomer
Posts: 24

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 Stan
Posts: 44

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

Schomer Schomer
Posts: 24

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 Schomer
Posts: 24

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:

<div class="float">
<div class="center-the-darn-image-somehow">
 <img src="images/image1.jpg" width="100" height="100" /><br />
</div>
</div>

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 Kk5st
Posts: 15

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 Schomer
Posts: 24

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

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

Kokokmas Kokokma Kokokmas Kokokma
Posts: 104

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



You must login to reply