| UCL OBSERVATORY (UCLO)
| UCL Department of Physics and Astronomy

Document URL: http://www.ulo.ucl.ac.uk/help/webdesign/cssref/sample-def/index.html Leave print version

You are here:

Web Help > ULO Website Design > ULO CSS Reference > Default ULO Style

Sample page with Default UCLO Style applied:

[Begin of file /inc/samples_xhtml.inc.]

This page presents a collection of XHTML element samples together with the respective code. It serves as a reference for page development and is used for verification of code rendering by browsers during CSS style sheet development.

The code samples can be used for cut and paste when creating new pages and all of them work in Firefox and Internet Explorer 6 and 7.

An extensive XHTML and CSS reference can be found at www.w3schools.com.

Detailed explanations on the use of XHTML elements can be found on the Wikipedia page "HTML Element".

Although the Wikipedia page is for HTML 4.01, most of it does apply to XHTML 1.0 as well.

In the examples below, Plain XHTML Elements shows how elements without additional formatting code are rendered, while XHTML Elements with Additional Style Attributes use additional id, class and/or style attributes to achieve the desired layout style for an element.

Plain XHTML Elements
XHTML Elements with Additional Style Attributes

TAG SAMPLES AND CODE:

Plain XHTML Elements

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

<h1 id="a_headers">
     Header 1 </h1>
<h2> Header 2 </h2>
<h3> Header 3 </h3>
<h4> Header 4 </h4>
<h5> Header 5 </h5>
<h6> Header 6 </h6>

Paragraphs

Example paragraph to show how it is formatted. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.

<p>
 Lorem ipsum dolor sit amet, consectetuer...
</p>

Text Formatting

Font Style Elements

These elements are presentational:

Bold text.

<b>Bold text.</b>

Italic text.

<i>Italic text.</i>

Teletype style.

<tt>Teletype style.</tt>

Small text.

<small>Small text.</small>

Big text.

<big>Big text.</big>

Text with x_subscript.

Text with x<sub>subscript</sub>.

Text with x^superscript.

Text with x<sup>superscript</sup>.

Phrase Elements

Strong text.

<strong>Strong text.</strong><br />

Emphasized text.

<em>Emphasized text.</em><br />

Definition: Megabyte - defines the first instance of a term.

Definition: <dfn>Megabyte</dfn> - defines the first instance of a term.<br />

Abbrevation: abbr.

Abbrevation: <abbr title="abbreviation">abbr.</abbr><br />

Acronym: XHTML

Acronym: <acronym title="Extensible Hypertext Markup Language">XHTML</acronym><br />

Inserted and Deleted Text

One inch is ~~2.5~~ 2.54 cm.

One inch is <del>2.5</del> <ins>2.54</ins> cm.

Quotations and Citations

The <q> tag is used for short inline quotations. The <blockquote> tag is used for longer quotations, i.e. complete paragraphs or groups of paragraphs and no inline elements are allowed inside it.

The attribute cite="<URI>" can be used with both <q> and <blockquote> tags, and <URI> must be a fully qualified Uniform Resource Identifier. Note that the <URI> will not be visible.

To display the source of a quote place it inside <cite> tags. The source can be just text (a book reference for example), or a link to the URI of the quoted source.

Short quotation: A penguin walks into a bar... (from http://leftjustified.net/journal/2005/01/07/table-q/).

<p>
 Short quotation:
 <q cite="http://leftjustified.net/journal/2005/01/07/table-q/">
  A penguin walks into a bar...
 </q>
 (from 
  <cite>
   <a href="http://leftjustified.net/journal/2005/01/07/table-q/">
    http://leftjustified.net/journal/2005/01/07/table-q/
   </a>
  </cite>
 ).
</p>

Blockquote example:

The <cite> tag also has a hidden feature: it enables you or someone else to automatically extract a bibliography from your documents.

From HTML and XHTML, The Definitive Guide, by Chuck Musciano & Bill Kennedy, O'Reilly 2002 .

<blockquote>
 <p>
  The <code>&lt;cite&gt;</code> tag also has a hidden feature:
  it enables you or someone else to automatically extract a
  bibliography from your documents.
 </p>

 <p>
  From 
  <cite>
   HTML and XHTML, The Definitive Guide, by
   Chuck Musciano & Bill Kennedy, O'Reilly 2002
  </cite>.
 </p>
</blockquote>

Another blockquote example:

The following article was taken from "The Observatory", December 1892, No.195, pp.441:

Discovery of a New Comet in Andromeda

We have had very little decent weather for observing in London of late, but I make a practice of never missing an opportunity.

Sunday, November 6th, was far from clear, and did not improve as the night deepened, so that after looking at Jupiter and a few double stars and finding the seeing unsatisfactory, I made up my mind to close observing at 11.30 P.M.

Ever since the temporary star appeared in M 31, I have taken an observation of that nebula at every chance I have had in case any further outbreak took

...

myself, and gathered a large number of facts for our instruction.

EDWIN HOLMES.

(This article is published with permission from the editors of The Observatory.)

<p>
 The following article was taken from
 <cite>"The Observatory", December 1892, No.195, pp.441</cite>:
</p>

<blockquote cite="The Observatory, December 1892, No.195, pp.441">

 <p>
  <b>Discovery of a New Comet in Andromeda</b>
 </p>

 <p>
 We have had very little decent weather for observing in London of late,
 but I make a practice of never missing an opportunity.
 </p>
 <p>
 Sunday, November 6th, was far from clear, and did not improve as the
 night deepened, so that after looking at Jupiter and a few double stars
 and finding the seeing unsatisfactory, I made up my mind to close
 observing at 11.30 P.M.
 </p>
 <p>
 Ever since the temporary star appeared in M 31, I have taken an observation
 of that nebula at every chance I have had in case any further outbreak took
 </p>
 <p>
 ...
 </p>
 <p>
 myself, and gathered a large number of facts for our instruction.<br /><br />
 </p>
 <p>
 EDWIN HOLMES.
 </p>
</blockquote>

<p><small>
 (This article is published with permission from the editors of
 <a href="http://www.ulo.ucl.ac.uk:/obsmag/">The Observatory</a>.)
</small></p>

Programme Code

This is user keyboard input (inline element).

This is <kbd>user keyboard input</kbd> (inline element).

This is computer code, i.e. a source code snippet (inline element).

This is <code> computer code</code>, i.e. a source code snippet (inline element).

This is a source code variable counter_value=5 (inline element).

This is a source code variable <var> counter_value=5 </var> (inline element).<br />

This is sample output from a program or script (inline element).

This is<samp> sample output </samp> from a program or script (inline element).

For blocks of code use the <pre>-tag:

<pre>-tag Example

This is text inside <pre></pre>-tags. It renders 
in fixed-pitch font, and
preserves spaces            and line breaks.

The line below is 80 characters wide.
01234567890123456789012345678901234567890123456789012345678901234567890123456789

The line below is 100 characters wide.
0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

The line below is 120 characters wide.
012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

To display (X)HTML code samples, pointed brackets and quotes ("<", ">" and """) must be written as their character entities ("<", ">" and """). This can be accomplished in a terminal window by piping the code through the following script:

#!/bin/bash
#
#  html2txt.sh
#
 cat -E | sed -e 's/</\&lt;/g' -e 's/>/\&gt;/g'  -e 's/"/\&quot;/g' -e 's/\$//g'
#

The script opens a pipe and waits for the original code as input. The resulting output can then be pasted into the XHTML document.

Ctrl-D will exit the script.

Using this method, the original XHTML-code from the previous paragraph can be converted and displayed:

<p>
 <code>Ctrl-D</code> will exit the script.
</p>

And taking the display of code one step further: To display the code that was used to display the original code, all "&" characters need to be replaced by "&", which could be done using the following script:

#!/bin/bash
#
#  code2code.sh
#
 cat -E | sed -e 's/&/\&amp;/g' -e 's/</\&lt;/g' -e 's/>/\&gt;/g' -e 's/"/\&quot;/g' -e 's/\$//g'
#

Applying this to the example yields:

<pre>
&lt;p&gt;
 &lt;code&gt;Ctrl-D&lt;/code&gt; will exit the script.
&lt;/p&gt;
</pre>

Note that above scripts only work for (X)HTML code; other source code might need more modifications to display properly.

Lists

Definition Lists

Definition Term 1 (inline elements only): Definition of Term 1 (block elements allowed)
Definition Term 2a
Definition Term 2b: Definition of Terms 2a and 2b
Definition Term 3: Definition 1 of Term 3; Definition 2 of Term 3; Definition 3 of Term 3

<dl>
 <dt>
  Definition Term 1 (inline elements only)
 </dt>
 <dd>
  Definition of Term 1 (block elements allowed)
 </dd>
 <dt>
  Definition Term 2a
 </dt>
 <dt>
  Definition Term 2b
 </dt>
 <dd>
  Definition of Terms 2a and 2b
 </dd>
 <dt>
  Definition Term 3
 </dt>
 <dd>
  Definition 1 of Term 3
 </dd>
 <dd>
  Definition 2 of Term 3
 </dd>
 <dd>
  Definition 3 of Term 3
 </dd>
</dl>

CSS styling of definition lists appears to be very inconsistent across browsers and it seems to be best to keep it simple. While they can be very useful (see www.maxdesign.com.au for a good discussion and nice ideas) one should always consider the use of tables as an alternative.

Unordered Lists

Unordered list with five levels:

Level 1
- Level 2
  - Level 3
    - Level 4
      - Level 5
- Level 2

<ul>
 <li>
  Level 1
  <ul>
   <li>
    Level 2
    <ul>
     <li>
      Level 3
      <ul>
       <li>
        Level 4
        <ul>
         <li>
          Level 5
         </li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </li>
   <li>
    Level 2
   </li>
  </ul>
 </li>
</ul>

Ordered Lists

Ordered list with default numbering:

List Item Level 1
1. List Item Level 2
  1. List Item Level 3
    1. List Item Level 4
List Item Level 1
1. List Item Level 2
List Item Level 1

<ol>
 <li>
   List Item Level 1
  <ol>
   <li>
     List Item Level 2
    <ol>
     <li>
       List Item Level 3
       <ol>
        <li>
          List Item Level 4
        </li>
       </ol>
     </li>
    </ol>
   </li>
  </ol>
 </li>
 <li>
   List Item Level 1
  <ol>
   <li>
     List Item Level 2
   </li>
  </ol>
 </li>
 <li>
   List Item Level 1
 </li>
</ol>

Horizontal Rule

The <hr /> tag creates a horizontal rule. In XHTML 1.0 strict it has no attributes and rule appearance is controlled by CSS styles only.

<hr />

Address

Block element. Use for contact information. Only inline elements are permitted. Insert a new line with <br />.
Use of email address obfuscation is highly recommended.

Author of this document:
Thomas Schlichter

<address>
Author of this document:<br />
<a href="mailto:%74%73%40%75%6C%6F%2E%75%63%6C%2E%61%63%2E%75%6B">Thomas Schlichter</a>
</address>

Images

Below are examples of images without links and of different sizes. The standard formatting does not support captions, and image information is added using paragraphs.

All image code is placed outside of paragraphs.

Image 600x450:

Images 320x240 and 240x180:

Images 160x120, 120x90 and 80x60:

XHTML code sample for adding an image:

<img src="/inc/img/placeholder_160x120.jpg"
     width="160" height="120"
     alt="Image of placeholder 160x120" />

Tables

While tables are easy to comprehend visually even if they are just a collection of rows and columns, correct semantic formatting and additional information is required to enable screen readers to render a table in a meaningful way for users with visual impairments. For this reason all table examples below provide a summary, a table header and footer (useful for long tables in particular), and column and/or row headers (<th> elements).

The border and width definitions make for a better display in plain XHTML style and should always be provided. Definitions of widths must be in per cent rather than pixels to allow tables to grow when fonts are scaled.

Note that the general formatting of a table is usually applied to the table itself using optional attributes, while CSS styles are used to define the appearance of the various table elements. This way a table still diplays correctly without CSS styling.

Tables are centered by default.

Some examples follow below:

Table with Top Header

Table with Top Header, 100% width, three columns (20, 40 and 40 per cent wide), header and footer.
Col 1 Header (20%)	Col 2 Header (40%)	Col 3 Header (40%)
Col 1 Footer (20%)	Col 2 Footer (40%)	Col 3 Footer (40%)
Row 1 Col 1 Data	Row 1 Col 2 Data	Row 1 Col 3 Data
Row 2 Col 1 Data	Row 2 Col 2 Data	Row 2 Col 3 Data

<table
 border="1"
 width="100%"
 summary="Replace_with_brief_summary_of_table"
 title="Replace_with_table_title" >
 <caption>
  Table with Top Header, 100% width, three columns (20, 40 and 40 per cent
  wide), header and footer.
 </caption>
 <col width="20%" />
 <col width="40%" />
 <col width="40%" />
 <thead>
  <tr>
   <th scope="col">
    Col 1 Header (20%)
   </th>
   <th scope="col">
    Col 2 Header (40%)
   </th>
   <th scope="col">
    Col 3 Header (40%)
   </th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>
    Col 1 Footer (20%)
   </th>
   <th>
    Col 2 Footer (40%)
   </th>
   <th>
    Col 3 Footer (40%)
   </th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>
    Row 1 Col 1 Data
   </td>
   <td>
    Row 1 Col 2 Data
   </td>
   <td>
    Row 1 Col 3 Data
   </td>
  </tr>
  <tr>
   <td>
    Row 2 Col 1 Data
   </td>
   <td>
    Row 2 Col 2 Data
   </td>
   <td>
    Row 2 Col 3 Data
   </td>
  </tr>
 </tbody>
</table>

Table with Left Header

Table with Left Header, 80% width, and three columns (20, 40 and 40 per cent wide).
Row 1 Header	Row 1 Col 2 Data	Row 1 Col 3 Data
Row 2 Header	Row 2 Col 2 Data	Row 2 Col 3 Data

<table
 border="1"
 width="80%"
 summary="Replace_with_brief_summary_of_table"
 title="Replace_with_table_title" >
 <caption>
  Table with Left Header, 80% width, and three columns (20, 40 and 40 per cent
  wide).
 </caption>
 <col width="20%" />
 <col width="40%" />
 <col width="40%" />
 <tbody>
  <tr>
   <th scope="row">
    Row 1 Header
   </th>
   <td>
    Row 1 Col 2 Data
   </td>
   <td>
    Row 1 Col 3 Data
   </td>
  </tr>
  <tr>
   <th scope="row">
    Row 2 Header
   </th>
   <td>
    Row 2 Col 2 Data
   </td>
   <td>
    Row 2 Col 3 Data
   </td>
  </tr>
 </tbody>
</table>

Table with Top and Left Header

Table with Top and Left Header, 95% width, three columns (20, 40 and 40 per cent wide), header and footer.
Col 1 Header (20%)	Col 2 Header (40%)	Col 3 Header (40%)
Col 1 Footer (20%)	Col 2 Footer (40%)	Col 3 Footer (40%)
Row 1 Header	Row 1 Col 2 Data	Row 1 Col 3 Data
Row 2 Header	Row 2 Col 2 Data	Row 2 Col 3 Data Text link to begin of tables section.

<table
 border="1"
 width="95%"
 summary="Replace_with_brief_summary_of_table"
 title="Replace_with_table_title" >
 <caption>
  Table with Top and Left Header, 95% width, three columns (20, 40 and 40 per
  cent wide), header and footer.
 </caption>
 <col width="20%" />
 <col width="40%" />
 <col width="40%" />
 <thead>
  <tr>
   <th scope="col">
    Col 1 Header (20%)
   </th>
   <th scope="col">
    Col 2 Header (40%)
   </th>
   <th scope="col">
    Col 3 Header (40%)
   </th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>
    Col 1 Footer (20%)
   </th>
   <th>
    Col 2 Footer (40%)
   </th>
   <th>
    Col 3 Footer (40%)
   </th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th scope="col">
    Row 1 Header
   </th>
   <td>
    Row 1 Col 2 Data
   </td>
   <td>
    Row 1 Col 3 Data
   </td>
  </tr>
  <tr>
   <th scope="col">
    Row 2 Header
   </th>
   <td>
    Row 2 Col 2 Data
   </td>
   <td>
    Row 2 Col 3 Data
    <a href="#a_tables">
     Text link to begin of tables section.
    </a>
   </td>
  </tr>
 </tbody>
</table>

Links

Text Links in Paragraphs

This TEXT LINK is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times. This Text Link is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times. This text link is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times.

<a href=""></a>

Text Links in Unordered Lists

Level 1
- Level 2

<ul>
 <li>
  <a href="#a_links_ul">
   Level 1
  </a>
  <ul>
   <li>
    <a href="#a_links_ul">
     Level 2
    </a>
   </li>
  </ul>
 </li>
</ul>

Images with Links

The same image examples as shown earlier, but now all link to a large size image.

As actual image captions are not supported in XHTML 1.0 strict, image information is added using paragraphs.

Image 600x450:

Images 320x240 and 240x180:

Images 160x120, 120x90 and 80x60:

XHTML code sample for adding an image:

<a href="/inc/img/placeholder_1024x768.jpg"
   title="Larger image..." >
 <img src="/inc/img/placeholder_160x120.jpg"
      width="160" height="120"
      alt="Image of placeholder 160x120" />
</a>

XHTML Elements with Additional Style Attributes

Clearers and Extra Space

Clearers prevent floats and text from getting mixed up. After a clearer the rendering starts all over again, with the upper left corner after the clearer as the starting point.

Code for a clearer:

<div class="cb-clear-both"> </div>

Extra vertical spacing can be added by inserting a line break:

<br />

Unordered Lists without Decoration

To prevent decoration of elements in unorderd lists use <ul class="cb-nodec"> :

Level 1
- Level 2
  - Level 3
    - Level 4
      - Level 5
- Level 2

<ul class="cb-nodec">
 <li>
  Level 1
  <ul>
   <li>
    Level 2
    <ul>
     <li>
      Level 3
      <ul>
       <li>
        <a href="#a_ul_nodec">
         Level 4
        </a>
        <ul>
         <li>
          Level 5
         </li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </li>
   <li>
    Level 2
   </li>
  </ul>
 </li>
</ul>

Images with Captions

To place a caption below an image the image code must be enclosed by <div> tags with class="img" and style="width: (image_width + 6)px;".

The caption itself must be enclosed in <span> tags:

Image with link to larger version and caption.

<div class="img" style="width: 166px;">
 <a href="/inc/img/placeholder_1024x768.jpg"
    title="Larger image..." >
  <img src="/inc/img/placeholder_160x120.jpg"
       width="160" height="120"
       alt="Image of placeholder 160x120" />
  <span>
   Image with link to larger version and caption.
  </span>
 </a>
</div>

Centered Images

To display the image in the center change class="img" to class="img-centered".

Centered image with link to larger version and caption.

<div class="img-centered" style="width: 166px;">
 <a href="/inc/img/placeholder_1024x768.jpg"
    title="Larger image..." >
  <img src="/inc/img/placeholder_160x120.jpg"
       width="160" height="120"
       alt="Image of placeholder 160x120" />
  <span>
   Centered image with link to larger version and caption.
  </span>
 </a>
</div>

The <div class="img-centered" ...> can also be used to display several individual images next to each other and center the group. The group must be followed by a "Clearer".

Image with link to larger version and caption.

<div class="img-centered" style="width: 350px;">
 <div class="img" style="width: 166px; float: left; margin-right: 10px;">
  <a href="/inc/img/placeholder_1024x768.jpg"
     title="Larger image..." >
   <img src="/inc/img/placeholder_160x120.jpg"
        width="160" height="120"
        alt="Image of placeholder 160x120" />
   <span>
    Image with link to larger version and caption.
   </span>
  </a>
 </div>
 <div class="img" style="width: 166px; float: left;">
  <a href="/inc/img/placeholder_1024x768.jpg"
     title="Larger image..." >
   <img src="/inc/img/placeholder_160x120.jpg"
        width="160" height="120"
        alt="Image of placeholder 160x120" />
   <span>
    Image with link to larger version and caption.
   </span>
  </a>
 </div>
</div>

<div class="cb-clear-both"> </div>

The individual images must be floated and need the addition of a right margin for all but the last image.

The width of the <div class="img-centered" style="width: 350px;"> element calculates as follows:

 width="width_img_1 + 6px + margin_1 + ... + width_img_n + 6px + (8px extra) "
 
 which for the above example is:  160px + 6px + 10px + 160px +6px = 350px

Images with Text Flow

To place an image in the upper left corner of a text section and allow paragraphs to flow around it, change class="img" to class="img-ulc".

For the upper right corner change class="img" to class="img-urc".

The text flow can be reset with a "Clearer":

<div class="cb-clear-both"> </div>

Image with link to larger version and caption.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.

Image with link to larger version and caption.

<div class="img-ulc" style="width: 166px;">
 <a href="/inc/img/placeholder_1024x768.jpg"
    title="Larger image..." >
  <img src="/inc/img/placeholder_160x120.jpg"
       width="160" height="120"
       alt="Image_of_placeholder_160x120" />
  <span>
   Caption
  </span>
</div>

<p>
 Lorem ipsum ...
</p>

<div class="cb-clear-both"> </div>

<div class="img-urc" style="width: 166px;">
 <a href="/inc/img/placeholder_1024x768.jpg"
    title="Larger image..." >
  <img src="/inc/img/placeholder_160x120.jpg"
       width="160" height="120"
       alt="Image_of_placeholder_160x120" />
  <span>
   Caption
  </span>
 </a>
</div>

<p>
 Lorem ipsum ...
</p>

<p>
 Lorem ipsum ...
</p>

<p>
 Lorem ipsum ...
</p>

For comparison, the example is repeated without a "Clearer":

Image with link to larger version and caption.

<div class="img-ulc" style="width: 166px;">
 ...
</div>

<p>
 Lorem ipsum ...
</p>

<div class="img-urc" style="width: 166px;">
...
</div>

<p>
 Lorem ipsum ...
</p>

...

Groups

To group content in a visually distinct way it can be enclosed in <div class="group"><div>-tags. The final line in such a group must be a "Clearer".

Image with link to larger version and caption.

Inline code in a paragraph. Link to "Groups". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.

A line of code.

<div class="group">

 <div class="img-ulc" style="width: 166px;">
  <a href="/inc/img/placeholder_1024x768.jpg"
     title="Larger image..." >
   <img src="/inc/img/placeholder_160x120.jpg"
        width="160" height="120"
        alt="Image of placeholder 160x120" />
   <span>
    Image with link to larger version and caption.
   </span>
  </a>
 </div>

 <p>
  <code>Inline code in a paragraph.</code>
  <a href="#a_groups">Link to "Groups".</a>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
  turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
  arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
  semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
  pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
  rhoncus.
 </p>

<pre>
A line of code.
</pre>

 <div class="cb-clear-both"> </div>

</div>

For more distinct group display two colour-variations of the group class are available: group-grey and group-blue:

Image with link to larger version and caption.

A line of code.

Note that as of 14/04/2008 a right-floated image inside a div can trigger a left-margin bug in IE7 (but not in IE6). It has been fixed in the CSS but requires some unusual formattings. Details are noted in the css file.

Image with link to larger version and caption.

A line of code.

Warning

To distinguish content as a warning it can be enclosed in <div class="warning"><div>-tags. To ensure that all content is contained in the group place a "Clearer" on the last line.

WARNING: Under no circumstances look at the sun through an unfiltered telescope.

<div class="warning">

 <p>
  <b>WARNING:</b>
  Under no circumstances look at the sun through an unfiltered telescope.
 </p>

</div>

Image with link to larger version and caption.

A line of code.

<div class="warning">

 <div class="img-ulc" style="width: 166px;">
  <a href="/inc/img/placeholder_1024x768.jpg"
     title="Larger image..." >
   <img src="/inc/img/placeholder_160x120.jpg"
        width="160" height="120"
        alt="Image of placeholder 160x120" />
   <span>
    Image with link to larger version and caption.
   </span>
  </a>
 </div>

 <p>
  <code>Inline code in a paragraph.</code>
  <a href="#a_groups">Link to "Groups".</a>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
  turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
  arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
  semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
  pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
  rhoncus.
 </p>

<pre>
A line of code.
</pre>

 <div class="cb-clear-both"> </div>

</div>

Special Tables

Tables with Linked Images

Links containing images inside tables need the special attribute class="cb-noborder" to prevent the display of the dashed bottom border.

Table with Top and Left Header, 98% width, three columns (20, 40 and 40 per cent wide).
Col 1 Header (20%)	Col 2 Header (40%)	Col 3 Header (40%)
Row 1 Header	Row 1 Col 2 Data More Row 1 Col 2 Data	Row 1 Col 3 Data

<table
...
   <td>
    Row 1 Col 2 Data<br />
    <a href="/inc/img/placeholder_1024x768.jpg"
       class="cb-noborder"
       title="Larger image..." >
     <img src="/inc/img/placeholder_80x60.jpg"
          width="80" height="60"
          alt="Image of placeholder 80x60" />
    </a><br />
    More Row 1 Col 2 Data
   </td>
...

UCLO Contact Information Table

The contact information for UCLO is formatted as a table with the special attribute class="cb-ulo-contact"

UCLO Contact Information:
Telephone:	+44 (0) 208 238 8870
Fax:	+44 (0) 208 238 8872
Email:	Secretary AT UCLO
Address:	UCL Observatory 553 Watford Way Mill Hill Park LONDON NW7 2QS
Location:	Map Travelling to UCLO
Staff:	Staff Profiles

<table
 class="cb-ulo-contact"
 width="70%"
 summary="Contact Details for UCL Observatory"
 title="UCLO Contact Information" >
 <caption>
  UCLO Contact Information:
 </caption>
 <col width="30%" />
 <col width="70%" />
 <tbody>
  <tr>
   <th>
    Telephone:
   </th>
   <td>
    +44 (0) 208 238 8870
   </td>
  </tr>
  <tr>
   <th>
    Fax:
   </th>
   <td>
    +44 (0) 208 238 8872
   </td>
  </tr>
  <tr>
   <th>
    Email:
   </th>
   <td>
    <address>
     <a href="mailto:%73%65%63%72%65%74%61%72%79%40%75%6C%6F%2E%75%63%6C%2E%61%63%2E%75%6B">
      Secretary AT UCLO</a>
    </address>
   </td>
  </tr>
  <tr>
   <th>
    Address:
   </th>
   <td>
    UCL Observatory<br />
    553 Watford Way<br />
    Mill Hill Park<br />
    LONDON<br />
    NW7 2QS<br />
    <br />
   </td>
  </tr>
  <tr>
   <th>
    Location:
   </th>
   <td>
    <a href="http://maps.google.co.uk/maps?f=q&hl=en&geocode=&q=university+of+london+observatory&sll=51.613646,-0.241528&sspn=0.008954,0.01987&ie=UTF8&t=h&om=1&z=16&iwloc=A">
     Map</a><br />
    <br />
    <a href="/find-us/">
     Travelling to UCLO</a><br />
    <br />
   </td>
  </tr>
  <tr>
   <th>
    Staff:
   </th>
   <td>
   <a href="/contact/staff-dir/">
    Staff Profiles
   </a>
   </td>
  </tr>
 </tbody>
</table>

UCLO Storage Box Content Table

Listing of archives held at Gospel Oak (boxes ULO-57 to ULO-84), compiled in March 2007.

Contents of box ULO-57, compiled in March 2007:
Item	Volume and Number	Date	Notes, Comments, Authors, Ref. No.
Item	Volume and Number	Date	Notes, Comments, Authors, Ref. No.
Astrophysical Journal	Vols. 428-437	20/06/1994 - 20/12/1994	Missing: Vol. 437 No. 2 Part 2 (20/12/1994)

Telescope Specifications

Radcliffe Telescope Specifications:
Built:	1901
Aquired:	1938
Refurbished:	1994
Optics:	Twin Grubb Refractor
Aperture:	18" / 24" (450mm / 600mm)
Focal Length:	276" (7000mm)
Detector 24":	EEV 1200 x 800 pixel CCD
Detector 18":	visual
Additional Instrumentation:	N/A
CCD Field of view:	12.6 x 8.4 arcmin
Controls:	Manual plus digital slew
Drive:	Electric stepper motor
Mount:	German Equatorial

More Radcliffe information...

The code below shows table, image and enclosing div. Note that the CSS style sheet defines both table and image width in per cent, not pixels.

<div class="cb-telescope-info">

<table
 width="100%"
 summary="Radcliffe Telescope Specifications"
 title="Radcliffe Specs" >
 <caption>
  Radcliffe Telescope Specifications:
 </caption>
 <col width="55%" />
 <col width="45%" />
 <tbody>
  <tr>
   <th>
    Built:
   </th>
   <td>
    1901
   </td>
  </tr>
  <tr>
   <th>
    Aquired:
   </th>
   <td>
    1938
   </td>
...
  <tr>
   <th>
    Mount:
   </th>
   <td>
    German Equatorial
   </td>
  </tr>
 </tbody>
</table>

<a href="/inc/img/placeholder_1024x768.jpg">
 <img src="/inc/img/placeholder_300x600.gif"
      alt="Image of the Radcliffe Telescope, view from East."
      title="Larger image..." />
</a>

<div class="cb-clear-both"> </div>

<p>
 <a href="/telescopes/radcliffe/"
    title="Go to Radcliffe page..." >
  More Radcliffe information...
 </a>
</p>

</div> <!-- cb-telescope-info -->

"Page not found" Form

<form id="pnf"
      method="get"
      action="http://www.google.com/search" >
 <fieldset>
  <input type="hidden"
         name="ie"
         value="iso-8859-1" />

  <input type="hidden"
         name="oe"
         value="iso-8859-1" />

  <input type="hidden"
         name="hq"
         value="inurl:www.ulo.ucl.ac.uk/" />
  <input type="hidden"
         name="filter"
         value="0" />
  <label class="fw-no-display" for="pnf-entry-field">
   Enter terms for UCLO site search:
  </label>
   <input id="pnf-entry-field"
          title="Enter search terms here"
          accesskey="4"
          type="text"
          value="UCLO_site_search"
          alt="Search Google"
          name="q" size="40" maxlength="255"
          />
   <input id="pnf-search-button"
          title="Start UCLO site search"
          type="submit"
          name="sa"
          value="Search"
           />
  <label class="fw-no-display" for="pnf-search-button">
   Press Enter or click Search Button to start UCLO site search
  </label>
 </fieldset>
</form>

[End of file /inc/samples_xhtml.inc.]