Add Floating Div to Webpage

Adding a Div Element To Place an Item

A "div" is a handy way to quickly add a picture, animation, form or any other item on one of your pages. Once added you can move the item around on the page easily. The advantage of using a "div" is that you can "layer" the item you are adding over any other page element except for the Flash animation. No item can be placed over the Flash animation unless the Flash is set to be transparent.

Adding a DIV

Step 1 of 3:
First, paste the code you want on your page. Somewhere inside the <!-- CONTENT TABLE --> or <!-- MAIN TABLE -->. Generally your will want to paste the item you wish to add anywhere in the main body of the webpage. Example, let's say you want to add a small picture on the left side on top of the menu. See the example above.

Step 2 of 3:
Add the div code around the picture on the html page.
(you can highlight and copy the code below):

<div id="locator">
<img src="picts/yourpicturename.jpg"><br>

Step 3 of 3:
Now add the following line to your .css file (called either "coolstyle.css" or "corporatestyle.css"):

#locator { position:absolute; visibility:show; left: 20px; top: 300px; z-index:200; }

Now you can adjust the location by changing the left and top numbers in the code above. NOTE: You can not put any items over the Flash animation. If you can not see your item, it may be hidden underneath. Try moving it around some more.

Allwebco Template Support

Allwebco Template Adding a DIV

Website Template Support
Website Template Support