Topic: gallery with CSS (Page 1 of 1)

I'm trying to do a thumbnail gallery with CSS, but I couldn't find a solution. The 4 x 9 images should be placed in rows, using all the space (width), so every image uses 25% of the available width. And there should be place for a caption beneath the thumbnail.

With tables it would look like this:

<table width=100%>

  <tr>

    <td width=25%>IMG</td><td width=25%>IMG</td><td width=25%>IMG</td><td width=25%>IMG</td>

   </tr>

  <tr>

    <td width=25%>caption</td><td width=25%>caption</td><td width=25%>caption</td><td width=25%>caption</td>

  </tr>

</table>

Thanks for your help!

Gweilo: In these circumstances I always head for this:
http://www.alistapart.com/stories/practicalcss/

It helps expalin how to achieve a range of effects using CSS.

___________________
Emps

FAQs: Emperor

Thanks for the link. With it I finally manage to do this task, but it still doesn't work perfectly.
It works fine in NN, Opera and Mozilla, but in IE (6) the DIV-tag which is positioned "margin-left:210px;" is suddenly shifted 10px to the left, hiding the 10px gap.
Another major problem is, that IE hides the text on top of the images. It seems to reappear (partly) when scrolled, hovered in the menu, or when the hidden text is marked with the mouse.

Another thing I couldn't fix is, that the images are ordered from right-to-left, since I had to float them right, because the menu is floated left. But that's not a big problem, I will just reorder them while selecting them from the DB.

Here's the link: http://www.3d-community.com/layouttest.html

Gweilo: The first problem is probably to do with IE poor implementation of the box model - see the GN CSS tutorials.

The second problem is very odd - I don't have time to go through your code but if someone hasn't spotted the problem later I'll give it a shot

___________________
Emps

FAQs: Emperor

thanks emps, I appreciate your help!

I tried the Box-Fix, but didn't help at all. Shouldn't the width-padding-thingy be fixed in IE6? I read through the tutorial, corrected my code (yes, there where many, many errors in there and probably still are), for example repeating ID's.

Here's the new code: http://www.3d-community.com/layout.php

It seams, that Nathus has the same problem (WIN/IE6) with the invisible texts, located here: http://www.ozoneasylum.com/Forum8/HTML/000661.html

I couldn't find a solution to either of my problems yet, but if I do, I'll post it here.



[This message has been edited by Gweilo (edited 09-23-2003).]

That's a sweet link emps, thanks.

:::11oh1:::

I finally found the solution! IE had problems displaying 3-times-nested divs correctly, so I just took them apart and everything worked just fine.