Training,  Tutorials & Guides

Positioning and layout in Omni (Div tags and CSS)

Free and in a lab
Time: 1 p.m. to 2 p.m., 11/19/2010 (Friday)
Location: Library 206
Instructor: Anne Arendt (WRS)

++ ALL ARE WELCOME ++

Covers working with Cascading Style Sheets in Omni.  It will include:

• Working with CSS Float
• Working with positioning divs (absolute and relative)
• Making stuff overlap

You won't be an expert at anything (we cover a lot in a short time) but you will know more about CSS works in the Web content management system used here at UVU (OmniUpdate).

There is space for 20 people. If you want to reserve a spot you can contact me at anne.arendt@uvu.edu or else you can just show up (seating is first come first served).

Files for session

• css-v3.docx
• practice zip file
• Sample CSS file

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:

.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!