Topic: gallery with CSS Pages that link to <a href="https://ozoneasylum.com/backlink?for=11054" title="Pages that link to Topic: gallery with CSS" rel="nofollow" >Topic: gallery with CSS\

 
Author Thread
Gweilo
Bipolar (III) Inmate

From: switzerland
Insane since: Sep 2002

IP logged posted posted 09-23-2003 18:29 Edit Quote

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:

code:
<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!

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-23-2003 18:56 Edit Quote

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

Gweilo
Bipolar (III) Inmate

From: switzerland
Insane since: Sep 2002

IP logged posted posted 09-23-2003 21:09 Edit Quote

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

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-23-2003 21:12 Edit Quote

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

Gweilo
Bipolar (III) Inmate

From: switzerland
Insane since: Sep 2002

IP logged posted posted 09-23-2003 23:50 Edit Quote

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).]

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 09-25-2003 15:08 Edit Quote

That's a sweet link emps, thanks.

:::11oh1:::

Gweilo
Bipolar (III) Inmate

From: switzerland
Insane since: Sep 2002

IP logged posted posted 09-26-2003 14:19 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu