Cascading Style Sheets (“CSS”) is a new HTML format which allows for overlapping and other creative positioning of content in an HTML page. It’s also required for most of the “Animation”-based DHTML Actions used in NetObjects Fusion 3.x and above.

“CSS” makes use of absolute positioning nomenclature, which means that relative positioning tags such as <CENTER> are not recognized in HTML pages which are published using the “CSS and Layers” option in our HTML Output settings.

Fortunately, we have a way to position a page in your browser window - even if it uses CSS and Layers - in (guess what?) JavaScript.

There are two methods for centering a CSS page in a browser window under NOF 3.0:

1. Centering a page which does not contain DHTML Actions
2. Centering a Page which uses DHTML Actions

Centering a page which does not contain DHTML Actions

To center a CSS page which does not use DHTML Actions, insert the following code into the “Between Head Tags” field in the “Layout HTML” window:

<script language = “JavaScript”> <!-- Hide from non-JavaScript Aware Browsers function centerLayout() { var layoutwidth = XXX // set the width of the page here if (navigator.appName == 'Netscape') {      var bodyWidth = self.innerWidth;      var theOffset = ((bodyWidth - layoutWidth)/2) - 10;      if (theOffset > 0)        document.layers['LayoutLYR'].left = theOffset;    } else {      var bodyWidth = document.body.offsetWidth;      var theOffset = ((bodyWidth - layoutWidth)/2) - 10;      if (theOffset > 0) document.all.tags('DIV')['Layout.LYR'].style.left=theOffset;    } // End Hiding --> </script>

Then insert the following code into the “Inside Head Tag” field in the “Layout HTML” window.

onLoad = centerLayout() onResize = centerLayout()

The effect of this script will be to load the page, then move it into “Centering” position. 
Click here to see an example of this script in action: