Thumbnail gallery without tables?

Discussion in 'HTML' started by Max Quordlepleen, Feb 23, 2004.

  1. Apologies for the crossposting, I wasn't sure which of these groups to
    ask this in.

    I have been lurking in these groups for a week or so, trying to glean
    what I need to design a simple, clean set of pages that get the w3c
    tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
    to the great information in these groups.

    Now, however, I'm having trouble. A few days ago, I read a thread that
    dealt with this issue of table-less thumbnails, and one example of an
    approach that worked was
    http://www.student.oulu.fi/~egea/Photo_Gallery/Virpiniemi/. This page
    renders properly for me in my Gecko browsers, and iCapture shows it as
    rendering properly in Safari, but in IE6, the thumbnails are lined up
    vertically in a single column. I am very pleased to have been able to
    avoid using any tables at all so far, and would love to keep this
    up. May I ask for suggestions on how to achieve a plain, boring
    table-like gallery in CSS2, sans tables?
     
    Max Quordlepleen, Feb 23, 2004
    #1
    1. Advertisements

  2. Max Quordlepleen

    Els Guest

    Not in my IE6.0....
    give them 'display:inline'. This way you can center them or
    left align them, just like regular text.
     
    Els, Feb 23, 2004
    #2
    1. Advertisements

  3. Could you specify which IE6 minor version? On what platform? IIRC have
    tested on XP and 2000.
    how about:
    http://www.student.oulu.fi/~atlas/kuvat/

    Does it happen there too?

    (special interest as I did both sites)
     
    Lauri Raittila, Feb 23, 2004
    #3
  4. Display:inline should not work as it does in IE, so it is useless when
    you have captions.

    but:
    http://www.student.oulu.fi/~laurirai/www/css/gallery/

    Uses inline for IE and inline-table for Opera 6 and 7 and bugless
    browsers. Tried to aply float:left for mozilla, but html*somthing bug is
    fixed in gecko, and it don't work anymore.

    Why they don't they fix bugs that do some real harm, instead of fixing
    useful bugs? There has been no big CSS fixes since Mozilla 1.
     
    Lauri Raittila, Feb 23, 2004
    #4

  5. Now _that's_ weird. My HTML editor is set to invoke my default browser
    (K-Meleon), and my IE6, so that I can see how pages look in both. When
    I open this page in the editor, and invoke IE6, the thumbs are
    vertically aligned. When I paste the URL into an already open IE6
    address bar, they are properly aligned. Very strange. Sorry for
    troubling you, and thanks for the prompt, helpful response.
     
    Max Quordlepleen, Feb 23, 2004
    #5
  6. Max Quordlepleen

    Els Guest

    True, I wasn't thinking of captions, actually, just the thumbs.
    The work of a webmaster/designer is never done...
    All these manufacturers of browsers should really have a
    maillist for webmasters, in which they tell exactly which
    bugs they fix everytime they do... together with a
    workaround if it was a useful bug ;-)

    On a recent site I already resorted to little tables (two
    cells) inside divs floating left. (where i didn't need it
    centered)
    That way I was able to define a height to the thumb and
    caption together, so that when the caption is more than one
    line, the divs don't start piling up at the end of the row.
    Also it made it possible to have the horizontal thumbs not
    top align with the vertical thumbs.
    Maybe the useful bugs are just easier to fix :)
    Good, I haven't memorized all CSS rules and bugs yet. Let 'm
    wait till I have ;-)
     
    Els, Feb 23, 2004
    #6
  7. Max Quordlepleen

    Richard Guest

    Good job too. Shows up in my IE 6 just fine. The sites show 3 across.
    1024x768.
     
    Richard, Feb 23, 2004
    #7
  8. Max Quordlepleen

    Sid Ismail Guest

    : and one example of an
    : approach that worked was
    : http://www.student.oulu.fi/~egea/Photo_Gallery/Virpiniemi/. This page
    : renders properly for me in my Gecko browsers, and iCapture shows it as
    : rendering properly in Safari, but in IE6, the thumbnails are lined up
    : vertically in a single column. I am very pleased to have been able to
    : avoid using any tables at all so far, and would love to keep this
    : up. May I ask for suggestions on how to achieve a plain, boring
    : table-like gallery in CSS2, sans tables?


    What in heaven's name is wrong with using tables for this application?
    Especially if you have text captions under/above each image.

    Tables is more universal than souped-up morse code.

    Sid
     
    Sid Ismail, Feb 24, 2004
    #8
  9. Max Quordlepleen

    Els Guest

    (lack of) flexibility :)
     
    Els, Feb 24, 2004
    #9
  10. Sorry, Lauri, it must have been some snafu when I downloaded the pages
    to dissect in my HTML editor. when I visit the pages using IE6, they
    are just fine. My sincere apologies.
     
    Max Quordlepleen, Feb 24, 2004
    #10
  11. Max Quordlepleen

    Nik Coughin Guest

    Tables aren't the best or even the simplest way to do it.

    Far from "souped-up morse code", a simple CSS thumbnail gallery would look
    like this:

    CSS:

    ..thumbnail{float: left;text-align: center;}

    gallery:

    <span class="thumbnail><img src="thumb1.gif" alt ="thumb 1" /><br />Caption
    For Thumb 1</span>
    <span class="thumbnail><img src="thumb2.gif" alt ="thumb 2" /><br />Caption
    For Thumb 1</span>
    etc.

    That's a hell of a lot simpler than using tables. I should know, I
    converted my table-based thumbnail gallery to a CSS-based one today.

    Also, a table is going to be a fixed number of cells wide. This means that
    your gallery is a fixed number of thumbs wide. The above will fit as many
    thumbs as possible into the space available horizontally and wrap the rest
    onto the next line. If you *want* it to be a fixed number of thumbs wide
    then you wrap it in a div that only has room for that many thumbs.

    If you want to apply styling to every thumb, you only have to add more
    attributes to the CSS part.

    CSS is a far superior way of doing thumbs than a table. That's what's wrong
    with using tables for this application.

    I don't agree with the argument that you shouldn't use tables for layout
    because they are intended for tabular data. I think you shouldn't use
    tables for layout because once you understand CSS it gives you much more
    power, is much more flexible and is simpler to implement than a table. It's
    simply a better way of doing things. You're limiting yourself if you use
    tables.
     
    Nik Coughin, Feb 24, 2004
    #11
  12. With either method (tables or divs) there could be a loss of semantic
    information depending on the implementation. For example if captions are a
    seperate table row then the connection between the image and the caption may
    not work very well for browsers rendering the content in non-visual ways,
    although obviously the title attribute would help here.

    As an alternate method I built a photo gallery as a collection of nested
    lists, although it doesn't have explicit captions it might make more
    semantic sense, but I'm still trying to decide:
    http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
    alone]
     
    Andrew Urquhart, Feb 24, 2004
    #12
  13. Max Quordlepleen

    Els Guest

    What about my mix of div's and tables here:
    http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptions.html
    (don't click the links, or you'll go into the site I
    borrowed the pics from ;-) )
    Would it lose semantic information? It's completely
    flexible, only left aligned, while I'd wish it to be
    centered, but that's ok.
    Looks very nice, but why did you put all these widths and
    heights in? The heights are all equal, and the widths don't
    matter, as far as I can see. And you are saying 128kb of
    markup, well, that might have to do with the length of your
    uri's :-D
     
    Els, Feb 24, 2004
    #13
  14. Max Quordlepleen

    Els Guest

    Just out of curiosity on the subject, could you give a url
    to that gallery you just converted?
     
    Els, Feb 24, 2004
    #14
  15. Max Quordlepleen

    Nik Coughin Guest

    Harder said than done.

    I have no ftp access to my site at the moment.

    You can see the original table based gallery at:

    http://homepages.ihug.co.nz/~nrkn/xml/

    Click screenshot test.

    You won't be able to see any source though, as it is an xml document being
    translated by xsl and the thumb gallery table itself is generated by
    JavaScript dynamically within the xsl. If you don't use IE 6 then I doubt
    very much that it will work -- not something that I'm proud of, but it was
    made last year before I started writing proper cross browser pages and using
    CSS.

    However, if you want to see what the html source looks like, copy the code
    below and paste it into notepad (or any other plain text editor), then save
    it as tables.html and open it in your browser. Below that, I have included
    my code for doing it with CSS. Notice that the table version is fixed
    width, the CSS version scales to your browser window.

    <html>
    <head>
    <title>Gallery with tables</title>
    </head>
    <body>
    Thumbnails<br/><br/>
    <table cellpadding="8" border="0">
    <tr>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
    border="0" align="bottom"/><br/>Caption 1</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
    border="0" align="bottom"/><br/>Caption 2</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
    border="0" align="bottom"/><br/>Caption 3</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
    border="0" align="bottom"/><br/>Caption 4</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
    border="0" align="bottom"/><br/>Caption 5</a>
    </center>
    </td>
    </tr>
    <tr>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
    border="0" align="bottom"/><br/>Caption 6</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
    border="0" align="bottom"/><br/>Caption 7</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
    border="0" align="bottom"/><br/>Caption 8</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
    border="0" align="bottom"/><br/>Caption 9</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
    border="0" align="bottom"/><br/>Caption 10</a>
    </center>
    </td>
    </tr>
    <tr>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
    alt="10" border="0" align="bottom"/><br/>Caption 11</a>
    </center>
    </td>
    <td>
    <center>
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
    alt="11" border="0" align="bottom"/><br/>Caption 12</a>
    </center>
    </td>
    </tr>
    </table>
    </body>


    <html>
    <head>
    <title>Gallery with CSS</title>
    <style>.thumb{float:left;text-align:center;padding:8px;}</style>
    </head>
    <body>
    Thumbnails<br/><br/>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior0.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior0.gif" alt="0"
    border="0" align="bottom"/><br/>Caption 1</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior1.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior1.gif" alt="1"
    border="0" align="bottom"/><br/>Caption 2</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior2.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior2.gif" alt="2"
    border="0" align="bottom"/><br/>Caption 3</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior3.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior3.gif" alt="3"
    border="0" align="bottom"/><br/>Caption 4</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior4.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior4.gif" alt="4"
    border="0" align="bottom"/><br/>Caption 5</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior5.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior5.gif" alt="5"
    border="0" align="bottom"/><br/>Caption 6</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior6.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior6.gif" alt="6"
    border="0" align="bottom"/><br/>Caption 7</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior7.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior7.gif" alt="7"
    border="0" align="bottom"/><br/>Caption 8</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior8.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior8.gif" alt="8"
    border="0" align="bottom"/><br/>Caption 9</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior9.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior9.gif" alt="9"
    border="0" align="bottom"/><br/>Caption 10</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior10.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior10.gif"
    alt="10" border="0" align="bottom"/><br/>Caption 11</a>
    </span>
    <span class="thumb">
    <a
    href="http://homepages.ihug.co.nz/~nrkn/xml/Images/exterior11.gif"><img
    src="http://homepages.ihug.co.nz/~nrkn/xml/Images/tn_exterior11.gif"
    alt="11" border="0" align="bottom"/><br/>Caption 12</a>
    </span>
    </body>
     
    Nik Coughin, Feb 24, 2004
    #15
  16. Max Quordlepleen

    Nik Coughin Guest

    Don't know where that came from. I meant easier said than done. Fool :)
     
    Nik Coughin, Feb 24, 2004
    #16
  17. Hmmn, in your implementation for each thumbnail image you've got a div
    containing a 1 cell x 2 row table. I think it's unlikely that the caption
    and image are ever going to get pulled apart from each other as they might
    do in a multi-celled table, so it'd be quite difficult not to associate the
    caption text with the image. That said, the table does actually seem
    somewhat redundant to me.

    Looking at the information you're representing in the page you have a
    collection of images with caption data, there are no categories or
    sub-categories in the gallery so you don't need any additional structural
    markup to order and partition your thumbnails - the reason why I used
    multiple lists of various types. The only thing you could do different
    AFAICS is use a single list, but you wouldn't gain too much by doing that. A
    list would allow a user to know how many items are in the gallery and to
    jump from thumbnail to thumbnail without being forced to jump over the
    captions as well, plus the user could more easily find the end of the list
    and skip to any following content, but in your example there only is the
    gallery and no other content, it would be hard to recommend implementing a
    list in such a case.
    If the browser knows the dimensions of the content (in this case the images)
    during download it can in theory render and layout the page as it downloads
    instead of having to wait for each image to download and then calculate the
    image dimensions from the image file data and then re-draw the page. It's
    also valid markup that way as well!
    :eek:) I know! The reason that the URIs are written out in full is rather off
    topic! It's because the page was actually created using a mirroring script
    that I built (http://www.andrewu.co.uk/tools/mirroragent/mirroragent.zip
    [9KB, zipped HTA]). That entire page is actually mirrored from
    www.andrewu.co.uk/photo/ in an attempt to save that sites megre bandwidth!
    The mirroring script changed the relative links in the original page during
    the mirroring process so that the web page would work on a different domain,
    it's just that I haven't gotten round to making it use relative URLs during
    this process. So, that's why their absolutely referenced! :eek:)
     
    Andrew Urquhart, Feb 24, 2004
    #17
  18. Max Quordlepleen

    Craig Guest

    Craig, Feb 24, 2004
    #18
  19. Max Quordlepleen

    Paul Furman Guest

    reformatted for the slow among us:

    Nik Coughin wrote:

    ..thumbnail {
    float: left;
    text-align: center;
    }


    <span class="thumbnail>
    <img src="thumb1.gif" alt ="thumb 1" />
    <br />
    Caption For Thumb 1
    </span>
    <span class="thumbnail>
    <img src="thumb2.gif" alt ="thumb 2" />
    <br />
    Caption For Thumb 2
    </span>
     
    Paul Furman, Feb 24, 2004
    #19
  20. Max Quordlepleen

    Steve R. Guest

    Nik Coughin wrote in message ...
    That page took forever to load on a dial-up, but I couldn't understand why.

    Maybe tables *are* quicker :~)
     
    Steve R., Feb 24, 2004
    #20
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.