Absolute Positioning Using CSS

Cascading Style Sheets, also know as CSS, or simply styles, allow designers to use absolute positioning to place objects on their HTML page. Instead of creating a master table the size of your LCD and then using a number of table cells to affect the position of objects on a page, you can use CSS to place a number of absolutely positioned "floating cells" on your page to gain pixel level control of each object.

When using CSS as a means to gain absolute positioning, the <DIV> tag is used as a container object to hold various objects you want to display on your page. The <DIV> tag can be thought of as a "floating cell" which can be placed anywhere on an HTML page. There is a style attribute associated with the <DIV> tag which can be used to define the height, width, and top left pixel of the "floating cell". Specifying the top left pixel gives you pixel level control of where your objects will be placed on the page.

A number of WYSIWYG HTML editors use the <DIV> tag to create floating cells. The Amulet HTMLCompiler has been used successfully with Namo Web Editor, Adobe GoLive and Macromedia Dreamweaver. Both Namo and Dreamweaver add "floating cells" by selecting Insert Layer. GoLive adds them by selecting Floating Box from the Object menu.

Applying Styles To The HTML Page

The Amulet HTMLCompiler supports two ways to apply styles: inline and embedded.

Inline CSS

You can define a style entirely within an appropriate HTML tag. This type of style is referred to as an inline style because it is defined in line with the document's HTML code. The HTMLCompiler allows for assigning a style attribute to only the <DIV> and <SPAN> tags. Inline styles are the easiest to follow and is how both Namo and Dreamweaver instantiate styles for their layers. The properties of the STYLE attribute have a different syntax than regular HTML, though. Each property is comprised of a property name and property value, separated by a colon. For example, to create a "floating cell" which is 100 pixels wide, 50 pixels tall, and is positioned 20 pixels from the top and 30 pixels from the left edge, you could code a line like this:

<DIV STYLE="position:absolute; top:20px; left:30px; width:100px; height:50px; font-family:Arial; font-size:10pt;">
This is text in a floating cell.
</DIV>

Embedded CSS

To embed styles in an HTML page, you place a <STYLE> block in the head section of the document. Every CSS rule consists of two parts: a selector, which defines the <DIV> tag ("floating cell") to which the style rule applies, and a series of property declarations that define the style. Although there are a number of different selector types, the HTMLCompiler only handles ID selectors. The ID selector permits you to identify single instances of "floating cells" where you wish to define the style properties. An ID selector requires definition in the embedded style block and explicit inclusion in the HTML tag. Use the “#” symbol to identify an ID selector. IDs must be unique within a document; no two HTML tags in a single document should have the same ID. This style sheet rule defines a rule for a "floating cell" with the ID unique:

#unique { position:absolute; top:0px; left:0px; width:120px; height:60px; font-family:Arial; font-size:10pt; }

The following is an example of how to embed a style sheet in an HTML page, as shown here in bold:

<html>
   <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <title>Example Embedded CSS</title>
        <style>
            #layer1 { position:absolute; top:160px; left:16px; width:100px; height:32px; font-family:Tahoma; font-size:8pt;}
            #layer2 { position:absolute; top:43px; left:24px; width:100px; height:100px; font-family:Arial; font-size:11pt;}
        </style>
    </head>
    <body>
        <div id="layer1">
            This is floating cell 1, using Tahoma size 8pt!
        </div>
        <div id="layer2">
            This is floating cell 2, using Arial size 11pt!
        </div>
    </body>
</html>

The Amulet HTMLCompiler only supports a subset of all available style properties. These styles are only supported by the <DIV> tag, except for the two font properties. They can also be used by the <SPAN> tag surrounding a block of text. The following matrix describes each available style property.

Matrix of Supported Style Properties

PROPERTIES DESCRIPTION

background-image

Sets the background image of an element. All background images are positioned at the top-left pixel of the floating cell. Background images do not stretch or tile to fit the size of the floating cell. The native size of the background image is the size of the displayed image on the LCD.

Syntax: background-image:url(imageFile); where imageFile is a .jpg or .gif static image.

Example usage:
background-image:url(myImage.gif);

border-style
Specifies the shading of the line bordering the floating cell. The only two choice the HTMLCompiler accept are solid and dotted. Solid results in a black line, whereas dotted results in a 50% gray line. If no border-style specified, default is dotted.
Syntax: border-style:solid | dotted;

Example usage:
border-style:solid;

border-width
Specifies the weight of the line bordering the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Range is 1px-15px. If border-width not specified, default is no border around the floating cell.
Syntax: border-width:nnpx; where nn is the floating cell's border line weight, in pixels.

Example usage:
border-width:2px;

font-family
Specifies the default font face to use for all text within the floating cell. This is the equivalent to the <FONT> tag and the FACE= attribute. One major difference is that if the font name has any whitespace within the name, such as Amulet Sans Serif, then it is required to bracket the font name with single quotes. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-family specified, default is Amulet Sans Serif.
Syntax: font-family:fontName; where fontName is the desired default font.

Example usage:
font-family:'Courier New';

font-size
Specifies the default font size to use for all text within the floating cell. This is similar to the <FONT> tag and the SIZE= attribute. All font sizes using font-size are specified in point size. Only point sizes are accepted. The size must be followed by pt, which designates point. Range is 8pt-99pt. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-size specified, default size is 12pt.
Syntax: font-size:nnpt; where nn is the desired default font size, in points.

Example usage:
font-size:9pt;

height
Specifies the height of the floating cell, in pixels. Used in conjunction with the width property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: height:nnpx; where nn is the height of the floating cell, in pixels.

Example usage:
height:150px;

left
Specifies the left most pixel location of the floating cell. Used in conjunction with the top property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: left:nnpx; where nn is the left most pixel location of the floating cell.

Example usage:
left:10px;

position
Specifies the type of positioning to use for the floating cell. The HTMLCompiler only accepts absolute positioning. This is a required property in order to use floating cells.
Syntax: position:absolute;

Example usage:
position:absolute;

top
Specifies the top most pixel location of the floating cell. Used in conjunction with the left property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: top:nnpx; where nn is the top most pixel location of the floating cell.

Example usage:
top:140px;

width
Specifies the width of the floating cell, in pixels. Used in conjunction with the height property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: width:nnpx; where nn is the width of the floating cell, in pixels.

Example usage:
width:150px;

Back to Welcome - Contact Amulet - Amulet Home

PROPERTIES	DESCRIPTION

background-image	Sets the background image of an element. All background images are positioned at the top-left pixel of the floating cell. Background images do not stretch or tile to fit the size of the floating cell. The native size of the background image is the size of the displayed image on the LCD. Syntax: background-image:url(imageFile); where imageFile is a .jpg or .gif static image. Example usage: background-image:url(myImage.gif);

border-style	Specifies the shading of the line bordering the floating cell. The only two choice the HTMLCompiler accept are solid and dotted. Solid results in a black line, whereas dotted results in a 50% gray line. If no border-style specified, default is dotted. Syntax: border-style:solid \| dotted; Example usage: border-style:solid;

border-width	Specifies the weight of the line bordering the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Range is 1px-15px. If border-width not specified, default is no border around the floating cell. Syntax: border-width:nnpx; where nn is the floating cell's border line weight, in pixels. Example usage: border-width:2px;

font-family	Specifies the default font face to use for all text within the floating cell. This is the equivalent to the <FONT> tag and the FACE= attribute. One major difference is that if the font name has any whitespace within the name, such as Amulet Sans Serif, then it is required to bracket the font name with single quotes. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-family specified, default is Amulet Sans Serif. Syntax: *font-family:fontName;* where fontName is the desired default font. Example usage: font-family:'Courier New';

font-size	Specifies the default font size to use for all text within the floating cell. This is similar to the <FONT> tag and the SIZE= attribute. All font sizes using font-size are specified in point size. Only point sizes are accepted. The size must be followed by pt, which designates point. Range is 8pt-99pt. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-size specified, default size is 12pt. Syntax: font-size:nnpt; where nn is the desired default font size, in points. Example usage: font-size:9pt;

height	Specifies the height of the floating cell, in pixels. Used in conjunction with the width property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: height:nnpx; where nn is the height of the floating cell, in pixels. Example usage: height:150px;

left	Specifies the left most pixel location of the floating cell. Used in conjunction with the top property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: left:nnpx; where nn is the left most pixel location of the floating cell. Example usage: left:10px;

position	Specifies the type of positioning to use for the floating cell. The HTMLCompiler only accepts absolute positioning. This is a required property in order to use floating cells. Syntax: position:absolute; Example usage: position:absolute;

top	Specifies the top most pixel location of the floating cell. Used in conjunction with the left property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: top:nnpx; where nn is the top most pixel location of the floating cell. Example usage: top:140px;

width	Specifies the width of the floating cell, in pixels. Used in conjunction with the height property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: width:nnpx; where nn is the width of the floating cell, in pixels. Example usage: width:150px;