Pictures in gallery presented irregularly

Discussion in 'HTML' started by Nico Schuyt, Oct 5, 2004.

  1. Nico Schuyt

    Nico Schuyt Guest

    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>
     
    Nico Schuyt, Oct 5, 2004
    #1
    1. Advertising

  2. Nico Schuyt

    Mitja Guest

    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).
     
    Mitja, Oct 5, 2004
    #2
    1. Advertising

  3. Nico Schuyt

    rf Guest

    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.
     
    rf, Oct 5, 2004
    #3
  4. Nico Schuyt

    Nico Schuyt Guest

    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
     
    Nico Schuyt, Oct 5, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Elliott

    Need Help with Thumbnail Gallery in Panel

    David Elliott, Oct 18, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    326
    Rick Strahl [MVP]
    Oct 18, 2003
  2. umberto
    Replies:
    0
    Views:
    417
    umberto
    Nov 18, 2003
  3. John

    OT: Picture Gallery

    John, Jan 2, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    440
  4. Peter Müller
    Replies:
    14
    Views:
    1,354
    Ole Streicher
    Jun 17, 2008
  5. Martin Raychev
    Replies:
    1
    Views:
    290
    Alvin Bruney [MVP]
    Mar 2, 2004
Loading...

Share This Page