dmClub JS & CSS general demo page |  |

# New & interesting

This is a brief news item or feature description, brought out from the rest of the page, breaking up the layout. Like a news in brief column. Blah blah de blah blah blah
Display the error bar: Demonstration of error bar activation
This is a brief news item or feature description, brought out from the rest of the page, breaking up the layout. Like a news in brief column. Blah blah de blah blah blah

# This is a heading (<h1>)

This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

## This is a heading (<h2>)

For neatness it appears closes to the following text than the preceding text, all throught the magic of CSS.

Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

### This is a sub-heading (<h3>)

This is the defaut font for body copy. Points you wasnt to hightlight should be set in bold. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

- An unordered list with a custom bullet point
- which has been defined a a graphic
- And very long elements hang neatly from the bullet point. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.
- Etc, et cetera ...

## Quoted speach

Voice A Voice B Voice C Voice D

## Keypad actions

Handset keypad actions are represented like this: Press #2 5, using the key b style.

The box outline can also be placed around multiple characters. Press ENTER

## Coloured table cells, table cell margins and dividers

Text in table cells, at the standard font size
cell_plain | cell1i | cell1f | cell2i | cell2f
cell_plain_thin | cell1i_thin | cell1f_thin | cell2i_thin | cell2f_thin
cell_plain_thin_pale | cell1i_thin_pale | cell1f_thin_pale | cell2i_thin_pale | cell2f_thin_pale
The class .divider is used to create neat coloured dividing lines in tables. Filling the cell with a transparent single pixel image and sizing it is used to control the thickness of the line.

Text in table cells, where the class detailed has been applied to the <table> tag, is sligtly smaller
cell_plain | cell1i | cell1f | cell2i | cell2f
cell_plain_thin | cell1i_thin | cell1f_thin | cell2i_thin | cell2f_thin
cell_plain_thin_pale | cell1i_thin_pale | cell1f_thin_pale | cell2i_thin_pale | cell2f_thin_pale
The class .divider is used to create neat coloured dividing lines in tables. Filling the cell with a transparent single pixel image and sizing it is used to control the thickness of the line.

# Internal messages

Messages displayed by applications for internal diagnostic purposes are set on a puple background, using the class internal applied directly to the text container (probably a <span> or <p> tag). When diagnostics appear in table cells, they can also be styled using the classes internal or internalThin applied to the <td> tag. The standard and thin variants share the cell padding properties of the other (public) standard and Thin variants illustrated in the tables above.

# Links and menus

Links appear like thisBubble help. Note the tooltip on mouseoverThe act of moving the mousepointer over an object or link on the screen. The word mouseover illustrates the style for infotext (infotext).

Links that open new window or popupsTooltips look like this appear like this. The popup arrow icon is automatically inserted when links are given the class popup. Note that this link demonstrates the javascript popup function when clicked, and a tooltip on mouseover.

Links that move the customer forward can have an arrow afterwards. The arrow icon is automatically inserted when links are given the class forward.

Links that open an options list. The arrow icon is automatically inserted when links are given the class options.

Tabbed link creation is supported by the stylesheet ...

- HomeThe controls homepage
- GeneralMiscellaneous control options
- DivertSet how your
  calls are diverted
- VoiceVoicemail settings
- GatewaySet your email address
  for message notifications
- Calls / MsgsYour call log

Tab body content is enclosed in a div with the class tab_body.

Horizontal menubars are also supported through CSS ...

Graphic buttons can also be created just by applying a CSS style (no images are directly called into the page, and no tables are used) ...

- Home

- Leave The Planet

Graphic buttons that move the customer forward ...

- Begin The Long March

- Continue

Graphic buttons that reload the current page (updating the content) ...

- Search

- Update My Status

## Floating elements left and right, with text flowing around

.float_left

This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

.float_right

This is the default font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text. This is the defaut font for body copy. Points you wasnt to hightlight should be set in the class emphasis. This lends focus to key points buried within the body text.

## Form elements

A text field

A select menu

Some radio buttoms

Some check boxes

A submit button, colors and rollover courtesy of CSS

## Footer bar

All pages have a footer bar specifying the application version, and the code and source revision.

dmNotesCounsult our full user
guide for more details dmSupportContact our helpdesk
Help for this page

# How to click a link, <h1> headling

Bold has a different appearance in page help areas. The beginners guide to how to click a link. The beginners guide to how to click a link. The beginners guide to how to click a link. The beginners guide to how to click a link.

Page help goes here

Close help window

# Further information and assistance

dmNotes: Consult our full user guide for more details
dmSupport: Contact our helpdesk with a technical enquiry, a question or your comments