Divs vs Tables

Created by: Lester Caine, Last modification: 06 Apr 2009 (17:56 UTC) by Chris
This has been moved from the FisheyePackage page so that it can be developed further if required. The main page is being expanded with details of the various options available, and this was getting in the way.

Advantages and disadvantages of divs vs tables

  • pros
    • browser compatible
    • easy to set up
  • cons
    • not flexible
    • same number of images per row, regardless of browser width

  • pros
    • highly flexible
    • number of images per row adjusts to browser width
    • text browsers display items below each other, making them easier to read
  • cons
    • some browsers might have difficulties displaying these (very few by now)
    • need to have css definitions to get them working

div based css

if you have having problems with the div based layout, you can go back to using the table based layout, or set some definitions in your css file.
the selector for the image surrounding box is:
.thumbnailblock .box {}

this is the code in fisheye/div_layout.css
we dynamically create class names based on the thumbnail size selection you have. have a look at the code below and you will see that we have 4 classes which correspond to the selected thumbnail size.
  • .avatar-thmb
  • .small-thmb
  • .medium-thmb
  • .large-thmb

this is the code in fisheye/div_layout.css

/* generic div based fisheye settings */
/* you can override these in your own css file */
.thumbnailblock .avatar-thmb,
thumbnailblock .small-thmb,
thumbnailblock .medium-thmb,
thumbnailblock .large-thmb     {float:leftoverflow:auto;}

thumbnailblock .avatar-thmb    {width:120pxheight:170px;}
thumbnailblock .small-thmb     {width:180pxheight:230px;}
thumbnailblock .medium-thmb    {width:420pxheight:470px;}
thumbnailblock .large-thmb     {width:820pxheight:870px;}

you can modify the file directly or apply set width and height in your css file, which will override the above settings.