Layout: fluid thumbnails

started by Thriva on Jul 3, 2004 — RSS Feed

Thriva Thriva
Posts: 12

Hello, I hope someone can help me with this.

My problem is with a php postcard script I am currently playing with. The script works fine, the difficulty I'm having is with the thumbnail page. Each of the thumbnails is a form, what I would like is for the images to fall in a row (with a bit of a margin of course) until the row is full and then for the next one to drop to the beggining of the next row and so on... just like text in fact. I can't seem to find a way to make them behave like your bog standard image.

Any ideas? Is it possible?

Joe Gillespie Joe Gillespie
Posts: 528

If the images are put inside a enclosing div that is set to text-align:left, or even into a table cell, they should fall the way you want. Give the images vspace and hspace values to get your margins.

Thriva Thriva
Posts: 12

Did you mean something like this?


<!DOCTYPE HTML PUBLIC "-//WC3//<!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Postcards from the edge</title>
<meta http-equiv="Content-type"
     content="text/html; charset=ISO-8859-1">


<style type="text/css">
.sidebys { text-align: left; margin: 20px; width: 200px; height: 140px; border: 2px solid #336; overflow: hidden }
</style>
</head>

<body>


<div class="sidebys">
<form method="post" action="sendcard.php">
<input type="image" border="0" value="Submit" src="images/tn_mapledesign.gif" width="200" height="140" name="image" style="width: 200px; height: 140px;">
<input type="hidden" name="image" value="mapledesign.gif">
</form>
</div>


<div class="sidebys">
<form method="post" action="sendcard.php">
<input type="image" border="0" value="Submit" src="images/tn_mapledesign.gif" width="200" height="140" name="image" style="width: 200px; height: 140px;">
<input type="hidden" name="image" value="mapledesign.gif">
</form>
</div>


</body>

</html>


That doesn't work for me; they still go one on top of the other... they went side by side when I changed the divs to spans and hadn't yet put in the declaration (I got quite excited at that point) but it didn't work once the declaration went in.

Maybe I've misunderstood what you were saying...

Joe Gillespie Joe Gillespie
Posts: 528

I see what you are trying to do now. Yes, unlike images, forms will go one above another. Why does it have to be a form? The image itself could be a button with an onclick event pointing to the PHP URL without needing a form at all.

Otherwise, you will have to put each form inside a div that is floated left.

Thriva Thriva
Posts: 12

Thanks, worked a treat. Never occurred to me to use the float property in that way… it’s a poor day when you learn nowt.

Yes, I think I understand why it doesn’t need to be a form. Originally there was an option to write a caption which didn’t interest me so I removed it. It would be neater to make it into a button… <sharp intake of breath> are we talking javascript here?  If so, that’s kind of out of my area of expertise, such as it is <laughs> so maybe I'll stick to the 'float left' method.

One other thing, I build my pages in IE, after all, my select audience all use this... I used to check them in Netscape too but kind of got the feeling that Netscape was on it's way out... if I were to check using just one other browser which would you suggest?

Joe Gillespie Joe Gillespie
Posts: 528

if I were to check using just one other browser which would you suggest?


Netscape 7, Mozilla, Firefox and Camino all use the Gecko rendering engine and will give similar results - but why stop at two? Safari and Opera are important too!

Thriva Thriva
Posts: 12

Well that was interesting! I had such a difficult time remaining logged on in this forum with Opera that in the end I had to reconnect in IE. This is a shame because I kind of like Opera.

You must login to reply