Divs or Unordered List For Creating a Thumbnail Gallery

Discussion in 'HTML' started by Ed, Jan 21, 2005.

  1. Ed

    Ed Guest

    Just starting out trying to learn XHTML/CSS and, to this end, I have a
    project to create a thumbnail gallery in which I can click on any image
    to display the full size picture. And I want to do this without using
    frames or tables. I've come across two approaches to this.

    The first is to put each thumbnail in its own div (all with the same
    class) and then use CSS to float these left and to add style:

    <div class="thumbnail"><a href="page5.htm"><img src="imgp0416_tmbn.jpg"
    alt="pic" height="125" />Image 416</a></div>

    <div class="thumbnail"><a href="page3.htm"><img src="imgp0382_tmbn.jpg"
    alt="pic" height="125" />Image 382</a></div>

    <div class="thumbnail"><a href="page4.htm"><img src="imgp0383_tmbn.jpg"
    alt="pic" height="125" />Image 383</a></div>

    In the second approach, each thumbnail is placed in an unordered list
    like so:

    <div class="thumbs">

    <li><a href="page5.htm"><img src="imgp0416_tmbn.jpg" height="125"
    alt="[pic]" />Image 416</a></li>

    <li><a href="page3.htm"><img src="imgp0382_tmbn.jpg" height="125"
    alt="[pic]" />Image 382</a></li>

    <li><a href="page4.htm"><img src="imgp0383_tmbn.jpg" height="125"
    alt="[pic]" />Image 383</a></li>


    Again, CSS is used to float the images to the left and apply style.

    Both approaches give me the same result. But is one method considered
    more strict? Are there any inherent advantages/disadvantages to one
    approach over the other?

    I would appreciate any advice based on the experience of this group,
    though I suspect that this is a project that has been done umpteen times
    by people here so may not be of any interest to you But, for me, it is
    new, and I'd like to get off to a good start.

    Ed, Jan 21, 2005
    1. Advertisements

  2. Ed

    Andy Dingley Guest

    Frames suck, tables don't. Just because some people have mis-used
    tables in the past doesn't mean you should avoid them.
    CSS can control almost every display behaviour. You can make a <u>
    look like a <menu> if you want to. It can't change the DTD behaviour
    though, so anything that's defined at that level you're stuck with
    (learn to read DTDs, and learn to understand the difference between
    block and inline elements)

    It's entirely possible (and sometimes done) to make your entire page
    out of <div> and <span> with some classes to tie-in the CSS. This
    isn't good practice though.

    A good design principle for CSS-dependent HTML is to imagine how the
    page will behave _without_ any CSS. Think about the semantics of HTML
    alone and build a page using that. Don't worry how ugly it is, just
    think about it as a text-only spider would see it. Then apply CSS to
    make it look however you wish.

    Another advantage of this technique is that it degrades well on
    limited display devices - you should be caring about how pages are
    rendered on phones these days, not just IE and Lynx.

    Don't be afraid to strip all the default display behaviour from a <li>
    if you want - stick them as absolute positioned images in a circle, if
    that's what the design calls for. The crucial aspect of list behaviour
    is that it's a set of items with some connection between them - so in
    your case, <ul> <li> is a better choice than a sequence of unconnected

    On the whole though, I'd go for a <table>. Your data is a set of
    thumbnail icons and this has as much right to be regarded as "tabular
    data" as any phone directory does.
    Andy Dingley, Jan 21, 2005
    1. Advertisements

  3. Ed

    Toby Inkster Guest

    With display:block, why do you need <div>?

    The minimum elements you need for a validating HTML 4.01 Transitional page
    that could look virtually however you liked would be <title>, <a> and
    either <link>, <style> or <script> to apply the styling information.
    Toby Inkster, Jan 22, 2005
  4. Ed

    Toby Inkster Guest


    It's tabular data if you do this:

    Umbrella Car Boat
    Red [Red umbrella] [Red car] [Red boat]
    Blue [Blue umbrella] [Blue car] [Blue boat]
    Pink [Pink umbrella] [Pink car] [Pink boat]

    (Where the sqaure bracketed strings represent images)

    That's because there's a legitimate association between all the cells in
    each row, and between all the cells in each column.

    This is not tabular data though:

    [Goat] [Turkey] [Umbrella]
    [Car] [Cat] [Boat]
    [Pineapple] [Map of Egypt] [Clint Eastwood]
    [Smith family] [Guitar] [Chicken]

    Because there are no associations between rows and columns -- it is merely
    utilising a grid for layout purposes, so shouldn't use an HTML table.
    Toby Inkster, Jan 22, 2005
  5. Ed

    Andy Dingley Guest

    You don't .

    But you do need <span>, because the DTD won't let you have
    <a ...> foo <div> bar </div></a>
    You could manage with one of them alone, but not <div> alone.

    However this is a crazy example, so it's best not to worry too much
    about it.
    Andy Dingley, Jan 22, 2005
  6. Ed

    Andy Dingley Guest

    IMHO, a grid for layout purposes (as a grid) is a legitimate table.
    That is a control of the inherent _topology_, which requires control
    of the HTML not just CSS.

    A table for setting column-widths isn't legitimate. That's taking the
    topology of plain old linear HTML and merely tweaking the sizes.
    Andy Dingley, Jan 22, 2005
    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.