SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS for Thumbnail Presentation

    Ok, so I am trying to get with the program and stop using tables and html for presentation and use CSS instead. My question for the CSS gurus is, if I am need to have a page with 16 thumbnails (4 x4) what is the proper combination of CSS and HTML to use? The old way would have me using tables, tr's and td's. Would I just use a bunch of nested DIV's? Or is the old way still appropriate in this case?

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well you can go for div for every image and set it float: left; and width that it has to have that is what I would do...
    i dont suppose you need nested divs, why that?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well it all depends if the images are to be centred or not and if they are captioned or not.

    If they have no captions then the simplest way is to leave them inline and just give them a margin to space themselves. No divs or html needed. You can even centre them using text-align:centre if they remain inline.

    However if they have captions then you will need to float them left in a div and put the caption underneath. This means that they won't all be centred on the page.

    There is a complicated method that I devised and I'm only showing it for interest but this method will allow captioning and centering but may be a step too far for such a simple task.

    http://www.pmob.co.uk/temp/centremultipledivs.htm

    If the images have captions and need to centred then a table would be ok to use and may be the easiest solution.

    Alistapart has an article on floating images with captions that you might find useful.

    http://www.alistapart.com/articles/practicalcss/

    Hope that doesn't beg more questions than answers

    Paul

  4. #4
    SitePoint Addict frankdux's Avatar
    Join Date
    Apr 2004
    Location
    Ashland, North Carolina
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for your reply. The images do require centering and captions. Your recommedations don't beg more questions than answers, but what it's telling me is that it will take further development of CSS before one can completely stop using HTML for presentation. For now I'll continue to use mostly CSS or a combo of HTML/CSS. In this case of my thumbnail presentation I think I'll either use tables or try the AListApart method.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •