Sami's Site:  CSB 5 Demo        home
CSB 5 Demo   |   Buttons   |   Templates   |   Forms   |   Link Colors   |   Tables   |   Colors   |   Page Properties   |   Flash   |   Photo Sequence Wizard

These links set to use color of link text.


I made this left page area thinner and the vertical dividing line in the template no longer shows for a smoother effect.

Tables

Trellix and CSB have always had a major limitation...The table sizes were always fixed with PIXEL settings.

This meant that if someone with 800x600 visited a page that was designed for 1024x768 it would force the visitor to have a bottom scroll bar to go side to side to view the contents of the page.

CSB has a terrific NEW FEATURE: percentage width and/or height
This allows the window to adjust for different resolutions
Also resolves the extra space problem between layered tables
Combine the % and fixed pixel setting for interesting results




Compare the following tables! Set your resolution to 800x600
then at 1024x768 or higher resolution to see the difference in the tables!

TABLE SIZE using fixed PIXEL settings:
This is an example of a table that has fixed pixel settings.  The contents of the table will stay within the confines of the table and it will not adjust.
The images in the left column are samples of the NEW CLIPART included with CSB 5.  The images come in multiple colors to coordinate with the new templates and even have a larger size like this one:

TABLE SIZE using NEW PERCENTAGE settings:
This is an example of a table that has uses the % settings.  The contents of the table will stay within the confines of the table but the table itself will expand to fill the window area.  

First set the table up using PIXELS, defining how you want it to look.

Then set your % to stretch the WHOLE TABLE.  No single column settings.  No struggling with how much % to set for each column!  
If you set it at 100%, the full available window area will be used.
If you set it at 97% there will be  a slight spacing to the right so it does not look crowded.
If set to 75%, the table will take up 3/4 of the available area.

The table will RETAIN it's general shape! Note that this table is built with the same proportions as the one above but the left column size expands with the table.  That is expected since it still takes up the same % of the table that the same column used in the fixed pixel table.

The table will expand to fill a wider page resolution but will not go to a size less than the settings used to build the table.  Example... This table uses an 70 pixel left column and a 480 pixel right column. So when you adjust resolutions to test this window, you will see that the table will not go to a size less than 550 pixels wide so a scroll bar WILL appear on the bottom of the window is to thin to support the width of the table.  

SO... If the table is designed to fit an 800x600 window (as this one was) it will expand to fit the larger screen resolutions!
The images in the left column are samples of the NEW CLIPART included with CSB 5.  The images come in multiple colors to coordinate with the new templates and even have a larger size like this one:

Screen shot of the simple setting:
At 100%, the table will adjust to take up ALL the page body width available.
(change your screen resolution to see it adjust)


The settings will work on a table inside a table also!
smaller table inside a table fixed width
500 pixel with table....fixed width with smaller table inside.

smaller table inside a table fixed width
500 pixel with table....97% width with smaller table inside.

smaller table inside a table 97% width
500 pixel with table....97% width with smaller table inside.

3rd layer - fixed width
smaller table inside a table 97% width
500 pixel with table....97% width with smaller table inside.

3rd layer - 100% width
smaller table inside a table 100% width
500 pixel with table....100% width with smaller table inside.

 
The % height finally resolves the problem with extra spacing between tables!

100% width & height  on inner two, 100% width on outer



The design window shows the PIXEL settings, the minimum size for the table above:


Each table is set separately.
Using less than 100% creates uneven spacing
(note the top of the tables are tighter than the bottom)

96% width & height  on inner two tables
96% width on outer table



Each table is set separately.
Using 100% creates even spacing between.

The yellow table has a 2px cell padding
The blue table has a 2px cell padding

100% width & height  on inner two tables
only PIXEL settings on outer table so it will not change size



Each table is set separately.
Using 100% creates even spacing between.

To make more of the table color show:
The light blue table has a 7px cell padding
The darker blue table has a 15px cell padding

100% width & height  on inner two tables
only PIXEL settings on outer table so it will not change size



Each table is set separately.
Using 100% creates even spacing between.

To make more of the table color show:
The light blue table has a 7px cell padding
The darker blue table has a 15px cell padding

100% width & height  on inner two tables
only PIXEL settings on outer table so it will not change size.  
Same table as above, without PINK background color