Page Structure

The general Cradur web page has the following structure (in psuedo CSS notation):

      body#page-pageName
      +--div.tpl.pageWidth
         +--div.tpl.hdr
         |  +--div.tpl.ctr
         +--div.tpl.main
         |  +--div.tpl.hrz.x01.comp
         |  |  +--div.tpl.ctr
         |  |    template element goes here
         |  +--div.tpl.hrz.x02.comp
         |  |  +--div.tpl.ctr
         |  |    template element goes here
         |  |
             there can be up to 98 div.hrz.xnn to accomodate menus and toolbars
         |  +--div.tpl.hrz.x99
         |     +--table.tpl
         |        +--tbody
         |           +--tr
         |              +--td.tpl.vrt x01
         |              |  +--div.tpl.ctr
         |                    contents of left-hand column here
         |              +--td.tpl.vrt x02
         |                 +--div.tpl.ctr
         |                    contents of right-hand column here
         +--div.tpl.ftr

As you can see, the structure is defined mostly in terms of classes. This allows you to apply a style rule to all elements of a class, or an intersection of classes. Through a combination of classes it is possible to identify each element uniquely if this is necessary.

Here is the reasoning behind the class naming:

tpl	All template elements are assigned to this class. This helps avoid ambiguity when identifying elements, in case one of the following classes is defined in the user content.
pagewidth	This could almost be an id, it is used for the main containing element of the page and is usually used to define the width of the central column where all content is dispalyed
hdr	This defines the area within page width above the main content area, and can be used for example to put the language choice menu.
main	This is the area that holds the main content, including banners, navigation menus, and user content
ftr	This defines the area within page below the main content area, and can be used for example to put the Cradur link
hrz	Any horizontal element, used primarily to define height and position
vrt	Any vertical element, used primarily to define width and position. Note that tables are used to divide the page vertically (I've yet to find a CSS method that works as well) so the vrt elements are table-data (< td > tags)
ctr	This is a container element. Because CSS defines height/width to exclude any padding, adding padding to a hrz or vrt element would ruin the height/width calculation. Therefore this element is used. Note that the padding must by default be set to some minimal value (0.001em say) to make sure that all elements are contained within this box, otherwise some elements would overflow (i.e. if padding =0).
x01 - x98	This is simply a numbering of the elements in case you need to identify any particular one.
x99	Is used for the horizontal element (hrz) which holds the main user content
comp	This is replaced by the code for the template component included in this element. This is the code used in the layout screen, e.g. "banr", "mnux"

See the