iframe overlapping graphic... help! [Archive] - Lissa Explains it All: Web Design Forums

RetroBlonde

03-09-2003, 01:00 AM

I have been searching for hours now all over the net and I found a code on these boards, but it still didn't work! I want the graphic called retroblock.gif (which i made transparent in ps6) to be infront of the iframe blogger.html. It still isn't working even with these codes. The blogger.html iframe keeps loading infront/on top of the graphic. Help please!?

<html>
<head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script language="javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</script>
<base target="blogger">
</head>

<STYLE type="text/css">
A:link{color:#FF8DC8;text-decoration:none;font-weight:bold;}
A:visited{color:#FF8DC8;text-decoration:none;font-weight:bold;}
A:active{color:#FF8DC8;text-decoration:none;font-weight:bold;}
A:hover{color:#ffffff;text-decoration:none;font-weight:bold;}

body{
color:#000000;
bg:#FF8DC8;
font-family: tahoma;
font-size:1pt;
line-height:7px;
word-spacing:1px;
scrollbar-face-color: #FF8DC8;
scrollbar-shadow-color: #FF8DC8;
scrollbar-highlight-color: #FF8DC8;
scrollbar-3dlight-color: #FF8DC8;
scrollbar-darkshadow-color:#FF8DC8;
scrollbar-track-color: #FF8DC8;
scrollbar-arrow-color: #FF8DC8}
input}
</style>

<body>
<body background="/graphics/retro0.gif" style="background-repeat: no-repeat;">

<div>

<div style="position: absolute; top:225; left:850;"><img src="/graphics/retroblock.gif"></div>
<div style="position: absolute; top:1; left:640;" style="border style:1px none"><iframe FRAMEBORDER="0" BORDER=0 width=275
height=298 src="blogger.html" name=main style=scrolling="auto"></iframe></div>
<div style="position: absolute; top:208; left:405;" style="border style:1px none"><iframe FRAMEBORDER="0" BORDER=0 width=208
height=120 src="me2.html" name=main style=scrolling="auto"></iframe>

</div>
</body>
</html>

MaGiCSuN

03-09-2003, 01:30 PM

That is because the image is also positioned with divs. The number one rule for divs is that everything that is positioned with it is always on top.

Just add the image like you normally add an image to your page with :

<img src="blah.gif" border=0>

and then only position the iframe with divs. Now you could have an small image, and if you want it more to the right then you got a problem. Just add your image into your image editor and add it to an bigger image thing. Could be that the space around it is only white or whatever but that's ok.

I hope you understand this. what i am basically trying to say is that you have to make a graphic as big so that the part you want to be under the iframe is on the exact place WITHOUT positioning it.

If you look at layouts that are made with divs and you will view the source then you will see that the layout itself is one big image file, and the text parts are the only things that are positioned with it otherwise they would get the same problem as you have here.

Love,
Mirna