All content in the right column should be bracketed between two snippet divs. The first snippet div should be Presentation - Raw HTML and type Snippet: Column - rightcol [start]. The final div should be Presentation - Raw HTML and type Snippet: Column - rightcol [end].
If the right column contains more than one heading, insert an h3 heading titled "Further information" at the top and use h4 for subsequent headings.
Regular text should be in paragraphs contained between standard paragraph <p>...</p> tags.
Layout and code help for your matrix web pages.
A page should always start with a single paragraph with the class "introduction" applied.
<p class="introduction">[introduction copy]</p>
All normal paragraphs that follow the introduction should be surrounded with the standard paragraph tag:
If a right column is present, all content in this main middle column should be bracketed between two snippet divs. These are Column - leftcol [start] and Column - leftcol [end]. Please refer to the right column for snippet div information.
The resultant code will appear as below:
<div class="leftcol"><p>[Content text]</p></div>
Images should be cropped to 165x165 pixels. Do this before uploading the image into Matrix. Images can be placed to the left or right of a column using classes "floatleft"or "floatright" respectively. Applying a class "border" will apply a standard 1 pixel border around the image. Ensure that the default 0 thickness border parameter in the Insert Image dialog in Matrix is deleted.
<img src="IMG URL" height="165px" width="165px"
alt="alternate text" class="floatright border">
<img src="IMAGE URL" height="165px" width="165px"
alt="alternate text" class="floatleft border">
<img src="IMAGE URL" height="165px" width="165px" alt="alternate text" class="floatright">
<img src="IMAGE URL" height="165px" width="165px" alt="alternate text" class="floatleft">
If there are multiple images on a page, rather than adding the border class to each image, you can apply an "img_borders" class to the content div which will apply a border to every image within the div.
<div class="img_borders">MULTIPLE IMAGES WITHIN DIV</div>
You can use a Heading 3 without any classes applied. Heading 1 is used in the black banner, Heading 2 is the page name in the sandstone title bar. Within the white space of the page you should always start with Heading 3.
<h3>h3 heading text</h3>
The "margin-right-185" and "margin-left-185" classes are used when there is a floated image next to elements, so that they will shift across properly.
If the image is right aligned, a heading placed to the "left" of an image should have the classes "underline margin-right-185" applied.
<h3 class="underline margin-right-185">heading</h3>
If the image is left-aligned, a heading placed to the "right" of an image should have the classes "underline margin-left-185" instead.
<h3 class="underline margin-left-185">heading</h3>
If you only use the "underline" class (without specifying the margin) on the Heading 3, the underline will span the full width of the div and there won't be any margin for layout around images.
<h3 class="underline">Underlined h3 heading</h3>
The overline class should only be applied to a Heading3 on a pages that contains a table of contents, with "back to top" links.
<h3 class="overline">Overlined h3 heading</h3>
There are no classes for Heading 4 or Heading 5. It is unlikely you will use a Heading 6.
Heading 5 is the lowest level heading to be used.
If unspecified use a h3, with or without the classes of "underline", "margin-right-185" or "margin-left-185".
Apply the "highlightbox" class to a paragraph to make it stand out.
This is the "highlightbox" class applied to a paragraph tag.
<p class="highlightbox">[highlightbox copy]</p>
Create a div with class highlightbox applied, and place the multiple paragraphs inside.
<p>[more highlightbox copy]</p>
This is multi-line #1
This is multi-line #2
This is multi-line #3
Regular unordered lists need no class. The default bullets will display automatically. Regular lists should not be too long.
<li>[regular list copy]</li>
For lists of links, apply a class of "linklist" to the ul element.
When lists hold a lot of information per point apply the class "listpadding" for extra padding between list items.
<li>[extra padding list copy]</li>
Ordered lists require no class to be applied.
<li>[regular list copy (one to two lines per list item)]</li>
If an alphabetical list notation is desired, add a class of "list-lower-alpha".
When placing jump links at the top of the page, which link to anchors further down the same page, apply the class "toc" to the ordered list element.
<li>[regular list copy (one to two lines per list item)]</li>
When information consists of a list of terms with copy to define them, a definition list with class "list" should be used.
In a similar fashion, when the information consists of a list of terms with copy to define them, with the added extra fact that they are also links, a definition list with class "linklist" should be used.
<dt>[list copy (for list items with definitions)]</dt>
<dd>A definition for that item, such as a short description.</dd>
<dt>[linklist copy (for linked list items with definitions)]</dt>
<dd>A definition for that link, such as a short description.</dd>
Tables should be used sparingly, and only for the display of tabular data. They should never be used as a page layout structure. Before applying a table, ask if the data can be shown in an alternative way. Could it be displayed using definition lists or headings? Could it be displayed via an embedded Excel spreadsheet?
The following table has the classes "ruled altrow" applied. The 'ruled' class will apply a 1 pixel line between rows. The 'altrow' class needs an additional 'dark' class to be applied to each alternate table row tag <tr class="dark"> to have alternate shaded rows visible.
Always markup the table head <th> cells.
|Table Head cell||Table Head cells||Table Head cells|
<table class="ruled altrow">[Table Fields]</table>
You can find an excellent accessibility tagging tool for tables at Accessify.
Non-html file types are always identified with type and file size in order to warn the reader of the download, and that they are about to launch an additional application.
A tall background image will appear visually more appealing when expanded to fit copy height.
<div class="bevelbutton"> <div class="border-top"> <div class="border-right">
<div class="border-bottom"> <div class="border-left">
<a href="[URL]" title="Link title">
<span style="background-image: url([URL]"><strong>Link title</strong>
<span>Secondary description only if necessery</span>
<div class="top-left"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-right"></div>
</div><!-- eo.border-left --> </div> <!-- eo.border-bottom --> </div>
<!-- eo.border-right --> </div> <!-- eo.border-top --></div><!-- eo.button -->