Tiling images in a horizontal line

Forum Moderators: open

Message Too Old, No Replies

Tiling images in a horizontal line

JakeFrederick

3:44 am on Feb 28, 2002 (gmt 0)

I'm trying to tile a group of small images (each one is a little over 80x60 pixels) in a horizontal line. The catch is I want it to adjust to the browser size, so if the next image won't fit without being clipped by the edge of the window it doesn't display. Once all the images have been displayed, it can start over(if the window ever gets that big). I would assume that this would be easiest done with some sort of JavaScript, is this true? Would it be feasible to think someone who has only used Javascript in a cut and paste way (though I do have a basic knowledge of programming) could do something like this without investing hours studying JavaScript? And final would this be as much of a cross browser nightmare as I think?

msampson

11:36 am on Feb 28, 2002 (gmt 0)

hi jake

it can be done with css floats, but it needs a workaround for ns4 which doesn't like dealing with floats.

this is how i did - it includes a caption for each thumbnail. you could simplify it if you only want images.

//styles

.thumbnail {float : left; height : 150px; width : 100px; padding-right : 7px; }
div.thumbnail img {border-bottom : 2px solid #999999;border-left : 0; border-right : 2px solid #999999;border-top : 0;}
.caption {clear : left; font-size : 10px; letter-spacing : 0;}

//html

<div class="thumbnail"><a href="link"><img src="image" width="" height="" alt="">
<div class="caption">caption</div></a></div>

<div class="thumbnail"><a href="link"><img src="image" width="" height="" alt="">
<div class="caption">caption</div></a></div>

then, the ns4 hack (needed because ns4 will continue floating the images past the edge of the container without wrapping). we put in <br> statements where you want ns4 to break the lines (calculated by where they would need to break on the minimum screen width you're dealing with), and we make sure that all other browsers ignore the <br>s:

create an extra stylesheet - netscapehack.css. link to it from your html pages using import (which ns4 fortuitously ignores for some reason):

//contents of that netscapehack.css should be:

br.none { display : none;}

result = opera, ie, ns6 etc read that sheet and don't display the <br>. because ns4 doesn't read that sheet, it puts in the breaks. (the <spacer> tag is ns specific and that's just used to make sure that when the breaks appear, they go to a new line - adjust its height and the height of the divs to match your image sizes).

cheers

miles

JakeFrederick

1:51 pm on Feb 28, 2002 (gmt 0)

Thanks for the reply, but the major issue is that I don't want the line to just break and start on the next line if the image is going to be clipped, I want it to stop displaying the images. I only want one line of images. They are for decoration, not thumbnails or serving any purpose so it doesn't really matter how many are displayed before the line ends.