Figure 1.
The main goal of this example is to show how to use CSS to gain absolute positioning of objects on the display. Instead of using a master table 320 x 240, we'll be using a number of "floating cells" that can be positioned anywhere on the page. The <DIV> and </DIV> tags are used to create the floating cells. Any object which can be placed in a normal table cell can also be placed into a floating cell. But, the beauty of the floating cells is that you can specify the top left pixel location of each floating cell. You get absolute positioning down to the pixel without dealing with complex <TR> and <TD> nested tags and pixel shims. When trying to layout an extremely complex UI, being able to specify absolute positioning and having the ability to easily resize the floating cell could save countless hours and headaches.
If you are currently using a WYSIWYG HTML editor, such as Namo, Dreamweaver or GoLive, you can still use your existing tool for editing the floating cells. Both Namo and Dreamweaver refer to the floating cells as Layers. GoLive refers to them as Floating Boxes.
This example is exactly the same as the Password example, but this ReadMe.html will focus on the layout using absolute positioning, whereas the Password ReadMe.html will focus on the functionality.
Below is a screenshot of the example page taken from Namo Web Editor's Edit window. The little yellow boxes at the bottom of the page are Namo's visual representation of floating boxes and comments.
Figure 1.
When first starting out with a page that will make use of absolute positioning, I like to make a single table with the dimensions of the LCD, just like we would if we were not using absolute positioning. I then encapsulate this table within a DIV tag using the style attribute to give it absolute positioning. This is in essence making a big floating cell with a table inside of it. I then position this floating cell at 0,0. This allows me to use a WYSIWYG editor to place other floating cells within this table and they will be positioned correctly. If you do not put the table within a floating cell, the table is not positioned at 0,0, so this is a necessary step. Here is what this empty table encapsulated within the floating cell looks like within the HTML:
<div id="layerMainTable" style="width:320px; height:240px; position:absolute; left:0px; top:0px; z-index:1;">
<table border="0" cellpadding="0" cellspacing="0" height="240" width="320">
<tr>
<td height="240" width="320"></td>
</tr>
</table>
<!-- Enter all your floating cells between these two tags. -->
</div>
Notice the different syntax related to the DIV tag's style attribute. See the CSS documentation for more information. At this point you can edit this table just as if you were dealing with a regular table. You can attach a background image and you can also split the table into multiple cells and use the features that HTML table cells are very efficient at handling. For instance, when creating an x by x grid with equal cell widths and heights, table cells are a very good tool for this.
But, if you are wanting pixel level control, using CSS for absolute positioning can greatly reduce the complexity of your HTML page. I've discovered that with Namo Web Editor V6, if you enter all floating cells between the closing </table> and </div> tags in the floating cell above, you are able to easily manipulate the floating cells and their contents in the Edit window. For this reason, this example will have all other floating cells entered into the HTML between the </table> and </div> tags. The HTML editor you are using might behave differently, so feel free to experiment to see what works best with your HTML editor. The floating cells can be entered into the HTML basically anywhere within the <body>...</body> tags. As far as where the floating cells will show up on your page, it depends upon the top: and left: properties of the DIV style attribute, not upon where the <div> tags are located within the HTML.
Another feature gained with CSS is that you can place multiple objects at the same location on the page. This is especially handy if you are wanting to alternate between objects being displayed at different times at the same location. In this example, the page starts out displaying an image in the lower right hand corner of the display. After the Enter button is pressed, a stringField appears and the image disappears. When entered into the HTML, both floating cells are positioned at 175,108. But the Image starts out visible and the stringField starts out invisible. Making the stringField visible and the image invisible is handled by a couple of META Refresh Tags that make use of the disappear() and reappear() IWC methods.
Generally speaking, you shouldn't have two objects reside on top of each other that are both visible at the same time. Depending upon which one appears first within the HTML and the type of the objects will determine which object appears on top. The HTMLCompiler ignores the z-index: property, so layering is only minimally supported.
By using the border-style: and border-width: properties of the DIV style attribute, you can specify the line weight and line style of the rectangular border that surrounds the floating cell. This is something that the HTMLCompiler cannot handle when dealing with regular table cells. In this example, we have a border around the paper clip image and the response stringField. Here is the source code for the floating cell that contains the paper clip image:
<div id="layerPicture" style="border-width:1px; border-style:solid; width:134px; height:95px; position:absolute; left:175px; top:108px; z-index:1;">
<p align="center"><img src="icon.gif" width="124" height="93" border="0"></p>
</div>
Notice the border-style:solid; and border-width:1px;, which will result in a one pixel width solid border around the entire floating cell. This rectangular region is 134 pixels wide and 95 pixels tall.
Another powerful aspect of using floating cells is that you can place entire tables within floating cells. As you saw at the beginning, we put the main 320x240 table within a floating cell. For this example, we also used another table to hold all the buttons of the keypad, since the equally spaced table cells were a perfect fit for this application. But, by enclosing this table used for the keypad within a floating cell, we are able to absolutely position this table anywhere on the page. This is an extremely powerful feature that allows us to easily move the entire contents of the table as a group without having to worry about the objects within the table losing their relative position to one another.
NOTES: