login | register
Thu 18 of Mar, 2010 (18:13 UTC)

bitweaver - Web Application Framework and CMS

Web Application Framework and CMS

Refresh cacheHistoryPrint

Divs vs Tables

Created by: Lester Caine, Last modification: Mon 06 of 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

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
/* 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.

Related Items

Documentation » Technical Documentation

Documentation geared towards developers and people who want to learn about the core processes of bitweaver

HEAD ON! Support has been added for Pear::DB!  •  Oracle Reservations for Two  •  ReleaseTwo: Shedding that last bits of our roots, finding the core of our being  •  getContentList  •  How to add a pagination to an object list  •  Moving bw in another directory  •  safe mode on / open_base_dir  •  sequence and auto  •  Anatomy of a Package  •  APIDocumentation  •  Archived Picture Upload with Fisheye under Windows  •  Bitweaver and Browser Cookies  •  bitweaverCVS  •  bitweaverPerformance  •  Contribute Code  •  CreatingServices  •  CssSchema  •  Divs vs Tables  •  InstallbitweaverDoc  •  IntegrationTutorial  •  LibertyFormats  •  LibertyMime  •  LibertyServices  •  MySQL and character encoding  •  phpdoc content status  •  PortingTikiWikiPackages  •  PrototypeAjaxObject  •  PrototypeReference  •  SamplePackage  •  SearchPackageDevNotes  •  TUTORIAL - Displaying Icons ONLY to AUTHORS of the page  •  Tutorial - Liberty Plugins  •  Tutorial - Liberty Plugins II  •  UsersDoc

Documentation » Theming and Styling

any documentation that helps or explains themeing and styling bitweaver

CascaderPackage  •  Divs vs Tables  •  FeatureThemeControl  •  Icon Research  •  IconThemes  •  StyleLayouts  •  Style Uploads  •  StyleVariations  •  theme compliance with MSIE  •  ThemeCSS  •  Themes Package  •  ThemeStructureIdea  •  ThemeStructureIdea2  •  ThemeTutorial  •  charles's Gallery  •  Style Layouts  •  Groups and Permissions Problem  •  Icon styles  •  Styles  •  antiquity  •  autumn 05  •  biticonification  •  Blue Smileys  •  dark shine  •  Mambo bw2

Comments