Positioning Example
 
 
This page shows an example of how to position a navigation bar to match a given page layout. The idea is to make the navigation bar appear as part of a table.

This example uses a fairly complex set of nested tables and text. Changing the browser window size, table set up or text will change the position of the white table below.

Embedded in the first row of this table is a transparent image with a height parameter set close to the expected height of the bar. When the page loads, the resulting position of that image on the page is found and those coordinates are used to position the navigation bar. View the source for details.

The result is that the bar always appears over the table. Changing the page content will not affect the relative placement as the image is contained in the table and will move with it.

Note that the table is defined with a fixed width. The bar is defined with the same width so that it will line up properly. You can hide and show the bar to see the page underneath.

Return