Training Materials

Using Div Tags for Body Layout in Omni

The easiest way to use div tags to position stuff in the body area of your web page in OmniUpdate:

1. Create a div "container" which has relative positioning (relative to the other stuff in Omni) 
2. Create div "containers" inside of this  main div container and position stuff using absolute positioning

Here is an example of how you would do it:

1. Open a a web page in the Omni Editor
2. Click on the "HTML" icon (second from the end of the icons in the WYSIWYG). This will bring up the HTML code.
3. Add code that looks something like this:
   
   <div style="position: relative; background-color:yellow; width:887px; height:600px">
   <div style="position: absolute; background-color:orange; width:200px: height:300px; top:45px; left:40px;">
   I am some sample body text on an orange background
   </div>
    <div style="position: absolute; background-color:red; width:200px: height:300px; top:45px; left:400px;">
   I am some sample body text on a red background</div>
   </div>
   
   Here is what I would end up looking like with the above code.

This code can also be added to an external CSS file and then 'called':

Go to your /lib/css/dept.css file

Add code similar to below in your /lib/css/dept.css file:

This code can also be added to an external CSS file and then 'called':

Go to your /lib/css/dept.css file

Add code similar to below in your /lib/css/dept.css file:

.customlayout {
position:relative;
width:887px;
height:650px;
z-index: 1;
background-color:yellow;
}

.box1 {
position: absolute;
border: 1px solid #000;
width:100px;
height:100px;
padding: 5px;
background-color:orange;
}

.box2 {
position: absolute;
left: 200px;
top: 200px;
border: 1px solid #000;
padding: 5px;
background-color:red;                   
}

Now we need to 'call' this code in your HTML code:

Go to edit the body area of your page.

Go to view source code

Add code to the top of the source code that looks like this:

<div class="customlayout">
<div class="box1">I am box 1</div>
<div class="box2">I am box 2</div>
[all your other body content here, and then at the very end of your source code add below]
</div>

Save your page and see what you ended up with!