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.
Divs
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.
this is the code in fisheye/div_layout.css
you can modify the file directly or apply set width and height in your css file, which will override the above settings.
Advantages and disadvantages of divs vs tables
Tables- pros
- browser compatible
- easy to set up
- cons
- not flexible
- same number of images per row, regardless of browser width
Divs
- 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
<?php
/* 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:left; overflow:auto;}
.thumbnailblock .avatar-thmb {width:120px; height:170px;}
.thumbnailblock .small-thmb {width:180px; height:230px;}
.thumbnailblock .medium-thmb {width:420px; height:470px;}
.thumbnailblock .large-thmb {width:820px; height:870px;}
?>
you can modify the file directly or apply set width and height in your css file, which will override the above settings.