Previous | Feedback | |

A MeadInKent header

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>

New Table formatting

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

Formatting whole Columns

<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

 

Positioning Side Picture and Text boxes

This is a box called by div class='rh-grey'
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;
}
   
class='rh-pic'

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 View a selection of recommended books on Excel