This makes use of a table and some combined CSS styles.
<td class='excelbg'> <div class='orsq'> <a href="excel.htm">Excel</a> </div> </td> | td.excelbg { background-image: url(sandb.gif); width: 120px; } |
The orange square DIV sets the font details and positions the square image before the text. | div.OrSq { background-image: url(org_sq.gif); background-position: 7px 5px; background-repeat: no-repeat; font-family: Comic Sans MS, Sans-Serif; font-size: 14pt; text-indent: 26pt; } |
.MySubMenuBar { color: gray; font-size: 9pt; padding-bottom: 2; padding-left: 4; padding-right: 2; padding-top: 1; word-spacing: 1; } |
<tr class='Mysubmenubar'> <td colspan="3" background="sandb.gif" width='360'><nobr> |
Mozilla browsers do not reflect the same formatting commands as IE6. The structure of tables can be adapted to overcome this although they continue to ignore <COLGROUP> formatting.
Heading class='red' (td class='red') | Heading class='red' | Heading class='grey' (td class='grey') |
Both the table (td class='redx') | and the individual cells | are given the class='redx' or 'greyx' |
If it is omitted | no borders appear |
<colgroup>
<col width='300' bgcolor="#F8F5F5"></col>
<col width='200' bgcolor="#FF0000"></col>
<col width='100' align='center'></col>
</colgroup>
(Only the width is applied by FireFox - the colours and alignment are ignored)
a | b | b |
b | c | d |
e | f | g |
h | i | j |
div.rh-grey { background-color: #F8F8F8; float: right; font-size: 9pt; margin-left: 10; padding: 16px; text-align: right; width: 240px; } |
div.rh-pic { color: gray; float: right; font-size: 8pt; margin-left: 5; padding: 10px; text-align: left; } |
Toby in centre - (td width='50%' style="background-image: url('toby1.jpg'); background-repeat: no-repeat; background-position: center 50%") | Toby in top-left (td width='50%' style="background-image: url('toby1.jpg'); background-repeat: no-repeat; background-position: top-left") |
td class = Red | An initial starting paragraph A picture using the div class rh-pic once again. A picture using the div class rh-pic once again but in a td cell this time |
This hand was placed on the left of the cell by using a style command directly as a div parameter, rather than using a predefined CSS class [div style=float: left;] | using a background color [bgolor='#C0C0C0'] |
And
<div class="lh-pic">
<div class="rh-pic">
<div class='insertpic'>
<div style="clear: both;"><br></div>
Using an acronym: <acronym title="blah">text</acronym>
or <acronym class='id' title="blah">text</acronym> if the dotted underline
is required.
file: formatcodes.htm | © meadinkent.co.uk |