Pictures in gallery presented irregularly

10-05-2004

I try to present a gallery in a way that pictures float and have a caption.
Technique floating iv's: http://www.nicoschuyt.nl/herman/p_schilderijen.php
(Code in sig)
The images however don't float regularly

Expected: Equal numbers of images on one horizontal row.
In practice (resize screen): 4 1 4 4 or 2 1 2 2 or 3 3 1 3 3
It must be something stupid.
Anyone an explanation?

--
Nico
www.nicoschuyt.nl

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<script language="php">
include "meta_inc.php";
</script>
<title>Schilderijen en boeken van Herman Smith</title>
<style type="text/css">
* {font-family: sans-serif}
body {color: #DDDDDD; background: #000000; margin:0; padding:0}
div#content {margin-left: 20ex;}
div.images {float:left; padding: 5px; padding-bottom:15px; width: 180px;
margin-left: 10px; text-align: center; border: 1px solid gray}
div.images img {margin-bottom: 5px}
</style>
</head>

<body>

<div id="content">
<h1>de schilderijen</h1>
<p>Op deze pagina van de site kunt u de schilderijen van Herman Smith
bezichtigen. <br>
Herman Smith werkt in thema's. De chronologische volgorde van zijn productie
is te lezen in zijn portfolio. </p>
<p>Alvast een voorproefje met een eerste thema:</p>
<h2>THEMA “EEN WONDERLIJKE REIS” </h2>
<p>Deze schilderijen noemt Herman Smith zelf ‘Nieuwe Iconen’.
<br>
In zijn boek “Een
wonderlijke reis“ ( Uitgeverij Boom, 2001 ) zijn deze schilderijen
afgebeeld bij
de verhalen die hij schreef. </p>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>
<div class="images"><img alt="" src="images/001.jpg" width="170"
height="249"><br>De molen van Piet</div>
<div class="images"><img alt="" src="images/002.jpg" width="152"
height="248"><br>Hoe God de aarde schiep</div>

<p style="clear: both"> </p>

</div>


</body>
</html>

10-05-2004

Nico Schuyt wrote:
> I try to present a gallery in a way that pictures float
> and have a caption. Technique floating iv's:
> http://www.nicoschuyt.nl/herman/p_schilderijen.php (Code
> in sig)
> The images however don't float regularly

> Expected: Equal numbers of images on one horizontal row.

The divs differ in height by a single pixel. Make sure your images are of equal height (they aren't now) or specify divs' height
explicitly (better, because of text).

10-05-2004

Nico Schuyt wrote:

I try to present a gallery in a way that pictures float and have a caption.

> Technique floating iv's:
http://www.nicoschuyt.nl/herman/p_schilderijen.php

> The images however don't float regularly

These images are floated left? <guess/>

Well, they all have to be exactly the same height. Your images are not. Some
of them are 248, some are 249.

To wrap, an image goes to the next usable canvas down, and then the next
usable canvas left, sort of down and around what is to the left of it. This
may not be, as you might expect, to the next "line".

So, a sequence of 249, 248, 248, where the last wraps, causes the last to go
down 248 pixels and then left, until it bumps into the 249. This is of
course not the left of the canvas.

BTW Most rendering engines get this bit wrong (if you want to call it
wrong), and most of them in different ways

--
Cheers
Richard.

10-05-2004

Nico Schuyt wrote:
> Mitja and rf wrote:

>> I try to present a gallery in a way that pictures float and have a
>> caption. Technique floating iv's:
>> http://www.nicoschuyt.nl/herman/p_schilderijen.php (Code in sig)
>> The images however don't float regularly

>> Expected: Equal numbers of images on one horizontal row.
>> In practice (resize screen): 4 1 4 4 or 2 1 2 2 or 3 3 1 3 3
>> It must be something stupid.
>> Anyone an explanation?

> All images should have exactly the same height

That solved it. I'd never found out myself!
Thanks!!!

--
Nico
www.nicoschuyt.nl

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
tooltips using css in picture gallery are hidden by pictures	Peter Müller	HTML	14	06-17-2008 06:46 AM
new pictures gallery	qatarpic@gmail.com	Digital Photography	1	11-15-2007 10:25 AM
new pictures gallery	qatarpic@gmail.com	Digital Photography	0	11-15-2007 08:02 AM
Gallery of Tulip Pictures	Sjo	Digital Photography	4	05-13-2004 12:13 AM
How 2 remove annoying pop up presented when computer switched on - User Environment	Monty	Computer Support	3	08-30-2003 03:18 PM