Photo Gallery. What is best practice? List or Divs?

Discussion in 'HTML' started by Ed, Jan 28, 2008.

  1. Ed

    Ed Guest

    I know some HTML and CSS and want to use these tools, avoiding the use
    of tables, to set up a gallery of thumbnail images which I can click on
    to see the full sized image.

    From what I read here and elsewhere, there seems to be two approaches:

    One is to create a basic unordered list of thumbnails (and any
    associated text) and float these.

    The second, is to put each thumbnail within its own div (with associated
    text) and float these.

    Is there any significant advantages/disadvantages to using the list
    approach to using the div approach?


    Many thanks,
    Ed
    Ed, Jan 28, 2008
    #1
    1. Advertising

  2. Ed

    Andy Dingley Guest

    On 28 Jan, 13:07, Ed <ex@directory> wrote:

    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?


    No, absolutely none. For any "significant" advantage at least.

    What _is_ significant is that a sequence of floated boxes (either way
    you describe) has better fluid behaviour than <table> markup.

    <ul><li>... markup is arguably more appropriate than meaningless
    <div>s, as there is some vague notion of a "list" structure to these
    thumbnails. That's pretty tenuous though.

    Default CSS rendering of <div> is likely to be more appropriate than
    for <ul><li>, in some fallback cases.

    Neither of these distinctions is major. I'd use <div>
    Andy Dingley, Jan 28, 2008
    #2
    1. Advertising

  3. Ed

    Sid Guest

    On Mon, 28 Jan 2008 13:07:52 +0000, Ed <ex@directory> wrote:

    : I know some HTML and CSS and want to use these tools, avoiding the use
    : of tables


    But tables is the most convenient tool for this...

    Sid
    Sid, Jan 28, 2008
    #3
  4. On Jan 28, 8:07 am, Ed <ex@directory> wrote:
    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?


    This is where some simple Flash really shines.
    Travis Newbury, Jan 28, 2008
    #4
  5. Ed

    Chaddy2222 Guest

    On Jan 29, 12:36 am, Travis Newbury <> wrote:
    > On Jan 28, 8:07 am, Ed <ex@directory> wrote:
    >
    > > Is there any significant advantages/disadvantages to using the list
    > > approach to using the div approach?

    >
    > This is where some simple Flash really shines.


    I agree especially if you want a slide show type effect where a user
    clicks on an arrow and the next pic is visible.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Jan 28, 2008
    #5
  6. Ed

    Els Guest

    Chaddy2222 wrote:
    > On Jan 29, 12:36 am, Travis Newbury <> wrote:
    >> On Jan 28, 8:07 am, Ed <ex@directory> wrote:


    [linked thumbnails on a page]
    >> This is where some simple Flash really shines.

    >
    > I agree especially if you want a slide show type effect where a user
    > clicks on an arrow and the next pic is visible.


    HTML is easy enough for arrows between pictures.

    --
    Els http://locusmeus.com/
    Els, Jan 28, 2008
    #6
  7. Ed

    Jeff Guest

    Chaddy2222 wrote:
    > On Jan 29, 12:36 am, Travis Newbury <> wrote:
    >> On Jan 28, 8:07 am, Ed <ex@directory> wrote:
    >>
    >>> Is there any significant advantages/disadvantages to using the list
    >>> approach to using the div approach?

    >> This is where some simple Flash really shines.

    >
    > I agree especially if you want a slide show type effect where a user
    > clicks on an arrow and the next pic is visible.


    Not exactly hard to do using javascript. And amongst the general
    populace, javascript is widely left on.

    Jeff
    > --
    > Regards Chad. http://freewebdesignonline.org
    Jeff, Jan 28, 2008
    #7
  8. Ed

    A-OK-SITE Guest

    On Jan 28, 7:07 am, Ed <ex@directory> wrote:
    > I know some HTML and CSS and want to use these tools, avoiding the use
    > of tables, to set up a gallery of thumbnail images which I can click on
    > to see the full sized image.
    >
    > From what I read here and elsewhere, there seems to be two approaches:
    >
    > One is to create a basic unordered list of thumbnails (and any
    > associated text) and float these.
    >
    > The second, is to put each thumbnail within its own div (with associated
    > text) and float these.
    >
    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?
    >
    > Many thanks,
    > Ed


    Ed,

    Check out this software it works great and creates valid pages
    http://jalbum.net/

    For a working example visit http://a-ok-site.com/carrie_underwood/carrie_underwood_gallery/index.html

    Daniel

    http://a-ok-site.com
    A-OK-SITE, Jan 28, 2008
    #8
  9. On Jan 28, 9:41 am, Els <> wrote:
    > >> This is where some simple Flash really shines.

    > > I agree especially if you want a slide show type effect where a user
    > > clicks on an arrow and the next pic is visible.

    > HTML is easy enough for arrows between pictures.


    But does it "shine"?
    Travis Newbury, Jan 28, 2008
    #9
  10. Ed

    A-OK-SITE Guest

    On Jan 28, 11:33 am, Travis Newbury <> wrote:
    > On Jan 28, 9:41 am, Els <> wrote:
    >
    > > >> This is where some simple Flash really shines.
    > > > I agree especially if you want a slide show type effect where a user
    > > > clicks on an arrow and the next pic is visible.

    > > HTML is easy enough for arrows between pictures.

    >
    > But does it "shine"?


    I think so, but you need to check it out to see if it meets your
    needs. It is fully customizable and offers many ready made skins. It
    is free to use and runs on your computer, so download it play around
    and see what you think. It also has FTP capabilities. I think you be
    pleasantly surprised, and I love it.

    Daniel

    http://a-ok-site.com
    A-OK-SITE, Jan 28, 2008
    #10
  11. Ed

    Els Guest

    Travis Newbury wrote:

    > On Jan 28, 9:41 am, Els <> wrote:
    >>>> This is where some simple Flash really shines.
    >>> I agree especially if you want a slide show type effect where a user
    >>> clicks on an arrow and the next pic is visible.

    >> HTML is easy enough for arrows between pictures.

    >
    > But does it "shine"?


    Only if I adjust my screen's brightness, but I'd say that goes for
    Flash as well ;-)

    (btw - I didn't respond to your message, because I have no idea about
    Flash being better for this job or not (apart from accessibility of
    course). Just said that for having a clickable arrow to go to the next
    image, you don't need Flash)

    --
    Els http://locusmeus.com/
    Els, Jan 28, 2008
    #11
  12. Ed

    Els Guest

    A-OK-SITE wrote:

    > On Jan 28, 11:33 am, Travis Newbury <> wrote:
    >> On Jan 28, 9:41 am, Els <> wrote:
    >>
    >>> >> This is where some simple Flash really shines.
    >>> > I agree especially if you want a slide show type effect where a user
    >>> > clicks on an arrow and the next pic is visible.
    >>> HTML is easy enough for arrows between pictures.

    >>
    >> But does it "shine"?

    >
    > I think so, but you need to check it out to see if it meets your
    > needs. It is fully customizable and offers many ready made skins. It
    > is free to use and runs on your computer, so download it play around
    > and see what you think. It also has FTP capabilities. I think you be
    > pleasantly surprised, and I love it.


    I think you're mistakenly thinking Travis responded to your reply to
    the OP :)

    (hint: there's no mention of 'jalbum' in this thread you're replying
    to)

    --
    Els http://locusmeus.com/
    Els, Jan 28, 2008
    #12
  13. Ed

    A-OK-SITE Guest

    On Jan 28, 11:48 am, Els <> wrote:
    > A-OK-SITE wrote:
    > > On Jan 28, 11:33 am, Travis Newbury <> wrote:
    > >> On Jan 28, 9:41 am, Els <> wrote:

    >
    > >>> >> This is where some simple Flash really shines.
    > >>> > I agree especially if you want a slide show type effect where a user
    > >>> > clicks on an arrow and the next pic is visible.
    > >>> HTML is easy enough for arrows between pictures.

    >
    > >> But does it "shine"?

    >
    > > I think so, but you need to check it out to see if it meets your
    > > needs. It is fully customizable and offers many ready made skins. It
    > > is free to use and runs on your computer, so download it play around
    > > and see what you think. It also has FTP capabilities. I think you be
    > > pleasantly surprised, and I love it.

    >
    > I think you're mistakenly thinking Travis responded to your reply to
    > the OP :)
    >
    > (hint: there's no mention of 'jalbum' in this thread you're replying
    > to)
    >
    > --
    > Els http://locusmeus.com/


    Yep, I noticed that to late, sorry all.

    Daniel
    A-OK-SITE, Jan 28, 2008
    #13
  14. Ed

    Guest

    google javascript lightbox

    On Jan 28, 7:07 am, Ed <ex@directory> wrote:
    > I know some HTML and CSS and want to use these tools, avoiding the use
    > of tables,  to set up a gallery of thumbnail images which I can click on
    > to see the full sized image.
    >
    >  From what I read here and elsewhere, there seems to be two approaches:
    >
    > One is to create a basic unordered list of thumbnails (and any
    > associated text) and  float these.
    >
    > The second, is to put each thumbnail within its own div (with associated
    > text) and float these.
    >
    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?
    >
    > Many thanks,
    > Ed
    , Jan 28, 2008
    #14
  15. Ed

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 28 Jan 2008 13:07:52 GMT
    Ed scribed:

    > I know some HTML and CSS and want to use these tools, avoiding the use
    > of tables, to set up a gallery of thumbnail images which I can click on
    > to see the full sized image.
    >
    > From what I read here and elsewhere, there seems to be two approaches:
    >
    > One is to create a basic unordered list of thumbnails (and any
    > associated text) and float these.
    >
    > The second, is to put each thumbnail within its own div (with associated
    > text) and float these.


    Well, you either read wrong or what you read is wrong.

    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?


    They both suck.

    From your "specs" above, all you need are simple inline images and links.
    If you want a somewhat symmetrical appearance, size your thumbs similarly
    and use margins and/or paddings appropriately.

    --
    Neredbojias
    Riches are their own reward.
    Neredbojias, Jan 28, 2008
    #15
  16. Ed

    Nik Coughlin Guest

    "Sid" <> wrote in message
    news:...
    > On Mon, 28 Jan 2008 13:07:52 +0000, Ed <ex@directory> wrote:
    >
    > : I know some HTML and CSS and want to use these tools, avoiding the use
    > : of tables
    >
    >
    > But tables is the most convenient tool for this...


    They don't flow
    Nik Coughlin, Jan 28, 2008
    #16
  17. Ed

    dorayme Guest

    In article <>,
    Sid <> wrote:

    > On Mon, 28 Jan 2008 13:07:52 +0000, Ed <ex@directory> wrote:
    >
    > : I know some HTML and CSS and want to use these tools, avoiding the use
    > : of tables
    >
    >
    > But tables is the most convenient tool for this...


    Not if you don't want to decide how many images should occupy a
    row nor to allow the greatest flexibility for the users.

    --
    dorayme
    dorayme, Jan 28, 2008
    #17
  18. Ed

    Chaddy2222 Guest

    On Jan 29, 1:41 am, Els <> wrote:
    > Chaddy2222 wrote:
    > > On Jan 29, 12:36 am, Travis Newbury <> wrote:
    > >> On Jan 28, 8:07 am, Ed <ex@directory> wrote:

    >
    > [linked thumbnails on a page]
    >
    > >> This is where some simple Flash really shines.

    >
    > > I agree especially if you want a slide show type effect where a user
    > > clicks on an arrow and the next pic is visible.

    >
    > HTML is easy enough for arrows between pictures.
    >

    Well yes it does. But it does depend on what you want to do.
    You I guess could add a Javascript event to the arrow which would
    animate the images but it's offen just easier done in Flash as you can
    have the images and everything in one file, but if file size and
    accessibility are a concern then obviously Flash would not be a good
    tool. Unless you like doing extra work to make it accessible.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Jan 29, 2008
    #18
  19. On Jan 28, 12:45 pm, Els <> wrote:
    > > But does it "shine"?

    > Only if I adjust my screen's brightness, but I'd say that goes for
    > Flash as well ;-)
    > (btw - I didn't respond to your message, because I have no idea about
    > Flash being better for this job or not (apart from accessibility of
    > course). Just said that for having a clickable arrow to go to the next
    > image, you don't need Flash)


    Flash may not be the best tool for this job. But it does do slide
    shows well, so the OP should at least take a look at it.
    Travis Newbury, Jan 29, 2008
    #19
  20. Ed

    Nico Schuyt Guest

    Ed wrote:
    > I know some HTML and CSS and want to use these tools, avoiding the use
    > of tables, to set up a gallery of thumbnail images which I can click
    > on to see the full sized image.
    > From what I read here and elsewhere, there seems to be two approaches:
    > One is to create a basic unordered list of thumbnails (and any
    > associated text) and float these.
    > The second, is to put each thumbnail within its own div (with
    > associated text) and float these.
    > Is there any significant advantages/disadvantages to using the list
    > approach to using the div approach?


    It looks like you want to use captions and (probably) different
    orientations.
    Best solution here is using a small floating table for each image. One row
    for the image and another for the caption.
    Example: http://www.hermansmith.nl/thema_reis.php
    Alternatives: http://www.cs.tut.fi/~jkorpela/www/captions.html

    If you have some knowledge of php, you can write a script that creates a
    gallery out of the pictures in a directory.

    --
    Nico
    Nico Schuyt, Jan 29, 2008
    #20
    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. bob garbados

    database driven photo gallery with upload

    bob garbados, Oct 29, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    568
    bob garbados
    Oct 29, 2004
  2. bob garbados

    Photo Gallery

    bob garbados, Nov 2, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    639
    Steve C. Orr [MVP, MCSD]
    Nov 2, 2004
  3. dan
    Replies:
    1
    Views:
    354
    bruce barker
    Dec 13, 2004
  4. msnews
    Replies:
    4
    Views:
    1,760
  5. Ed
    Replies:
    5
    Views:
    3,511
    Andy Dingley
    Jan 22, 2005
Loading...

Share This Page