HTML Top-Level Elements

The stock template integrated with the I-Metrics CMS arranges the high level HTML elements in a way to present a nice layout yet promoting the actual page content. This process is essential for new websites where the actual page content is presented at the top of the HTML document for search engines while the layout meets the standad human expectations.

This article describes some aspects when setting up a new template to position HTML elements in an order expected by visitors and at the same time promote the most dynamic elements of the site and it is intended for an advanced developer audience.

By utilizing various CSS rules any section of the site can be relocated in the HTML document. The most usual method is by using absolute positioning of DIVs. A DIV can enclose a part of the document. If you examine the stock HTML source code you will notice the content of this article is located right after the critical HTML headers. When you view the page however the content of this article is way below after the header section and navigation menu.

In this case the positioning process of the content is done via negative margins on the outer DIVs which makes them behave like absolute DIVs. At the same time the header of the template uses a standard DIV rule and is automatically positioned at the top of the page. In the source code the header is located at the end of the HTML document. Furthermore the menu section is located in the HTML code after the main page content and again is relocated automatically just above the page content.

To better understand the main HTML elements open your stylesheet.css that is located in the root of your site. The main elements are:

1. wrapper
2. mainbody
3. hideflow
4. leftpane
5. menucontainer
6. rightpane
7. header
8. footer

The wrapper encloses pretty much the entire document. To center the document we use the margin auto property for left/right along with a width. These 2 lines ensure the content is centered and the width specifies how much space horizontally is allocated from the document. The wrapper is used inside the includes/object/html_start_sub2.php file where the main document DIV tag is opened. The wrapper DIV is closed at the end of the document in includes/objects/html_end.php.

The mainbody DIV follows right after the wrapper. It's main purpose is to enclose the page content and achieve relocation to the top of the HTML code. Looking at the CSS properties of the mainbody class you will notice it uses a negative margin for the bottom with a value close to the compatibility max values of the ancient scroll bar objects which used a 16bit integer to describe the scroll positioning. A 30000 value is good enough for the template to make the DIV behave like an absolute one.

Two additional properties are set one to float the element and another for relative positioning so the element is in the foreground of the page. The top margin is used to generate a vertical placeholder for the header.

The hideflow DIV encloses the 2 sections of the main document. The left pane and right pane. It also uses negative bottom margin because of the menu bar relocation.

The leftpane encloses the main content of this article the menu and the left footer. By using the padding property of the leftpane DIV a placeholder is generated for the menu.

The rightpane DIV encloses the summary of the zones and the right footer. The upper part on the right that looks part of the rightpane is controlled by the header.