STATIC "FRAME5" - THIS IFRAME HOVERS OVER IMAGE!

The blue center square is on another page, showcased in an iframe that floats over the collage image!

FRAME 5: borderless, shown in blue box above over white image, scroll bar turned off.

Two parts to this code, placed into your page separately. (use insert >HTML in CSB/webgem in Trellix)

a) Using CSS positioning code, the iframe has an added definition to cause the iframe to float above the page elements.

how far from the left

how far from the top (I have it WAY DOWN the page!)

height of iframe

z-index stack order. The z-index property of the code is set high to force this item to be in front of other items on the page. The z-index property can only be used with the "position:absolute;" setting.

To capture the code, press Select All then COPY the contents.

Select All
<style type="text/css"> #FRAME5 {position:absolute; left: 310px; top: 1758px; width: 166px; height: 93px; z-index: 100 } </style>

b) The iframe code below has the <div> codes added and should be placed where you want the iframe to appear. After publishing, tweak the CSS code to have the iframe appear exactly where you want it! Modify items highlighted in blue in code as necessary to fit your site.

<div id="FRAME5">

<iframe name="FRAME5" width="166" height="93" src="cb.htm" frameborder="0" scrolling="no"></iframe>

PLACEMENT CONSIDERATION FOR FLOATING FRAME, seen in FRAME 5: This floating iframe is placed in a SPECIFIC place on your page using the ABSOLUTE positioning. You can have a problem with placing your iframe over an element (table, image, etc) that is CENTERED! This iframe code is far more difficult to get to work right and takes more effort. It also may not appear correctly in other than IE.
When your visitor sees your page using the SAME resolution as you built the page, the iframe will line up over the element the way you intended.800x600 notice placement of center blue box!	When your visitor sees your page using a HIGHER resolution than your setting the element will move to the middle, but the iframe stays exactly where you set it! 1024x768 Much better to use a LEFT alignment for your element (table, image, etc) below so it matches alignment when screen resolution changes!

Understanding the basic iFrame code:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" scrolling="no"></iframe>
Code elements:	Used in samples:	What is it?
iframe name	FRAME5	Name of the frame (call it anything you want) No spaces, no symbols except - and _ Multiple iframes: each iFrame needs a different name
src	cb.htm	Address of the Contents page that you want to see in the frame If you want to see a blank box until you click a link, use about:blank as your address. Better choice: start with a basic page with an introduction, etc.
width	166 40%	Wide: Enter number of pixels for the window Or enter the percentage for the window size
height	93 60%	High: Enter number of pixels for the window Or enter the percentage for the window size
frameborder	1 = show a 3d edge 0 = no border	3d edge on the iFrame window Using 0 makes the edge invisible.
scrolling	auto = browser decides yes = always have no = do not show	Scroll bar: if your content page is too long or wide to fit into the iFrame, then scroll bars appear automatically as needed, even without the scrolling="auto" code! Adding scrolling="no" to your code will stop the scroll bar from showing. But be careful! If you have content outside the window, your visitor will not be able to see it.
Other iframe settings you can choose to use though I have no samples made with them: <iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" scrolling="no" hspace=10 vspace=5 ></iframe>
hspace vspace	10 5	External Space AROUND the iframe. Adust the hspace (horizontal-space on right and left) or vspace (vertical-space above and below the iframe.
<body topmargin=10 leftmargin=5>		Internal Space WITHIN the iframe. This code is placed into the body of the content page to adjust the margin within the iframe. On FRAME 5 sample, I set the margins to 0. In CSB, use Insert> HTML to place the code.