Pictures in gallery presented irregularly

N

Nico Schuyt

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 &ldquo;EEN WONDERLIJKE REIS&rdquo; </h2>
<p>Deze schilderijen noemt Herman Smith zelf &lsquo;Nieuwe Iconen&rsquo;.
<br>
In zijn boek &ldquo;Een
wonderlijke reis&ldquo; ( 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">&nbsp;</p>

</div>
<!-- end of content -->


</body>
</html>
 
M

Mitja

Nico said:
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.
Click to expand...

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

rf

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 :-(
Click to expand...

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 :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Gallery - mosiac/grid layout with filtering and information page popup 1
Help with Visual Lightbox: Scripts 2
Having difficulty with the layout of these images / video for this web page 2
Image not changing between "mute" & "un-mute" images. 5
Stuck with html and css 25
How to make a div select work? 5
Help with code 0
Aligned to the left 3

Members online

Total: 35 (members: 2, guests: 33)
Robots: 497

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top