PDA

View Full Version : Absolute positioning NOT WORKING!

lovely_sugar102
01-30-2003, 08:18 PM
The IFrame in the following code, is BEHIND the image. How can i get it ON the image? here's the code:

<body bgcolor="#FF9F09">
<style type="text/css">
<!--BODY {
color:red;
font-size:11pt;
font-family: times new roman;
}

BODY{
scrollbar-face-color: #ff0000;
scrollbar-arrow-color: #FFEB09;
scrollbar-track-color: #FF9F09;
scrollbar-highlight-color: #ff0000;
scrollbar-3dlight-color: #FFEB09;
scrollbar-darkshadow-color: #ff0000;
scrollbar-shadow-color: #ff0000;
}

A:link{COLOR:ff0000; TEXT-DECORATION: none;}
A:visited{COLOR:ff0000; TEXT-DECORATION: none;}
A:active{COLOR:yellow; TEXT-DECORATION: none; cursor: e-resize;}
A:hover{COLOR:yellow; TEXT-DECORATION: none; cursor: e-resize;}
-->
</style>
<!--
#image { position:absolute; visibility:visible; left:0; top:0; width:0; align:right }
#frame { position:absolute; visibility:visible; left:11; top:194; width:406; align:center}
-->
</style>
<IMG SRC="portfolio images/portfoliolayout.jpg" BORDER=0 style="position:absolute; left:0; top:0;">
<div id=frame>
<iframe FRAMEBORDER="0" BORDER=0 width=406
height=185 src="home.html" name="frame" scrolling=yes style="filter:alpha(opacity=50)"></iframe>

<div style="position: absolute; top:20; left:533" style="filter:alpha(opacity=50)" >
<table border=1 bordercolor=red cellspacing=0 cellpadding=1 bgcolor=orange >
<tr><td>
<a href="experiments.html" target="frame">About Me</a>
<td>
<a href="experiments.html" target="frame">The Portfolio</a>
</tr></td>
</table>
</div>
<div style="position: absolute; top:47; left:470" style="filter:alpha(opacity=50)" >
<table border=1 bordercolor=red cellspacing=0 cellpadding=1 bgcolor=orange >
<tr><td>
<a href="experiments.html" target="frame">Blending</a>
<td>
<a href="experiments.html" target="frame">Color</a>
<td>
<a href="experiments.html" target="frame">Experiments</a>
<td>
<a href="experiments.html" target="frame">Layouts/Logos</a>
</tr></td>
</table>
</div>

And yes, I do realize that the links are all the same....this is just a test. THANKS :)
Charrey
01-31-2003, 02:18 AM
Try putting the image in a div too and using the z-index tag. The higher the number, the more towards the top it is.

Like this:

<div style="position: absolute; z-index:1">
<IMG SRC="portfolio images/portfoliolayout.jpg" BORDER=0 style="position:absolute; left:0; top:0;">
</div>

<div id=frame>
<iframe FRAMEBORDER="0" BORDER=0 width=406
height=185 src="home.html" name="frame" scrolling=yes style="filter:alpha(opacity=50)"></iframe>

<div style="position: absolute; top:20; left:533; z-index:2" style="filter:alpha(opacity=50)" >



There's a div tutorial at my website if you need a little more clarification.
bejayel
02-03-2003, 03:26 AM
if i were youi would put my position code right in the table and right in the img tag!!!! divs are useless.