Monday, 27 March 2017

Events

  • Open panel button
  • Close panel button
Duck  in bubbles

You can add content here too!

Add text, links, tables, bullets and images. Position your content here or after the Contact box (if you are using it!).

This image is over 800 pixels wide - es2 has automatically changed its size so it fits neatly in this column.

Contacts

es2 Information & Support Tel: 0300 065 8888

View pages in a different language

Search site

Applying formatting to content within tables and creating multi-column effects

Stylesheet Classes

Stylesheet Casses are pre-defined instructions that you can use to format content. By using Stylesheet Classes you can format content within tables to create properly spaced text and pictures in single or multiple columns and cells.

A number of pre-defined classes are provided for you to use:

  • tblcolumns
  • tblcontent
  • notableformat
  • ntfcontent
  • notablebackground

Stylesheet Classes can be used in combination with other classes. For instance, notableformat and tblcolumns could be used in combination to create a multi-column effect. To do this, simply type in the class names separated by a space in the 'Stylesheet Classes' field under the 'Advanced' tab of the Table dialogue box.

Using proportional values to let your table and content grow to fit the page width

Visitors to your site can use the 'Hide menu' button to expand the page content to fill the width of your website. Using proportional widths and heights allows web page elements to expand and contract to suit the page width.

Proportional values are normally defined as percentages, so instead of entering a table or cell width in pixels, enter the value as a percentage: i.e., 100%, 50%, 33%.

You can also use percentages to ensure that any images you place inside a table cell will fit neatly. This is particularly useful if you are intending to create a multi-column layout. Simply enter an image width of 100% and an image height of 100% to force the image to resize within a table cell to always fit even if 'Hide menu' is used. Enter image widths in the Image dialogue box.

Check out the examples below.
Try clicking the 'Hide menu' button to see how the layouts respond to the change in page width.

Note: Don't worry about how the table and content look while working in the Content Editor. Use the 'Preview this page' button to view the page in context so you can see how it will actually display using the stylesheet classes you have set.


Tabbed effect using notableformat and ntfcontent

Removes borders and backgrounds. Paragraph and heading spacing is removed. This will give the effect of tabbed columns of text. (Tabbing is not availbale in HTML!).

Add this class, ntfcontent, in addition to notableformat to format text and force consistent line spacing to be applied. Ensure that your text is formatted with 'Normal' or 'Normal (DIV)'.

TIP: Adjust the cell widths to adjust the 'tab'.

Example:

Mr Smith Headteacher
01622 123456
Mr Jones
0156543 890
Mrs Golightly
07747787765677
Ms Howdoyoudo
990990199199

 


Table formatted to display content in columns using notableformat and tblcolumns

Removes borders and backgrounds. Applies paragraph, heading spacing, cell padding and image size controls within a cell. Content is positioned at the top of a cell.

Example:
This table has been given a width of 100% and each cell has a width of 33%. You rarely need to set a table height as the table will find its own height determined by the content.

TIP: If you only want 2 columns, set each cell to a width of 50%.

 

Heading 1 which needs to wrap inside the column

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin.

The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

Heading 2 whihc needs to wrap inside the column

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

  1. A number of pre-defined skin designs are provided.

  2. There is also an es2 base skin and an es2 default skin.

  • The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design.

  • The pre-defined skins also can all be fully edited.

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

Heading 3 which needs to wrap inside the column

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

 


Table formatted to display content using tblcontent

Applies paragraph, heading spacing, cell padding and image size controls within a cell and maintains borders and backgrounds. Content is positioned at the top of a cell.

TIP: Use in combination with notablebackground to place the content on the same background as your web page.

Example:

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin.

The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

Heading 2

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

Heading 3

A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.

 


Other stylesheet classes

notablebackground

Removes the background from a table. Borders are still displayed.

Page last updated:  Thursday 8 January 2015

es2 website builder and content management system designed by EiS Kent. Tel: 0300 065 8800. Copyright 2017 Kent County Council. About Cookies