God Im confussed [Archive] - Lissa Explains it All: Web Design Forums

kimmy

03-14-2003, 05:53 PM

Right I've got to make this site for some it project I've done it by slicing up an iamge into three parts and fading the middle of the image and putting them together using divs. I've then put an in-frame on the div containing the middle of the image and made it transparent I think! but the inframe is coming out down the bottom and the image on the same div is in the right place? could you try look at the code I'm using and see if theres something wrong with it?

Index page, I havent bothered put the css

<div style="position:absolute; top:10; left:100; width:820; height:173; background:#ffffff;
border-color:000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;"><IMG SRC="TOP2.GIF" BORDER="0"></DIV>

<div style="position:absolute; top:109; left:100; width:822; height:20; background:#ffffff;
border-color:000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;">DREAMS COME TRUE DREAMS COME TRUE DREAMS COME TRUE DREAMS COME TRUE... <a href="diving.html" target="1">DIVING</A> <A HREF="SPOIL.html" TARGET="1">SPOIL YOURSELF</A> <A HREF="WATER.html" TARGET="1">WATERSPORTS</A> <A HREF="FLIGHT.html" TARGET="1">FLIGHT</A> </DIV>

<div style="position:absolute; top:182; left:100; width:820; height:523; background:#ffffff;
border-color:000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;"><IMG SRC="MIDDLE2.GIF" BORDER="0"><iframe src="MAIN.html" name="1" width="800" height="400" border=0 frameborder=0 framespacing=0 ALLOWTRANSPARENCY="true"
></iframe>
</DIV>

<div style="position:absolute; top:704; left:100; width:822; height:108; background:#ffffff;
border-color:000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;"><IMG SRC="BOTTOM2.GIF" BORDER="0"></DIV>

page that goes in the inframe

<HTML>
<HEAD>
<TITLE>Dreams Come True</TITLE>
<style type="text/css">

</style>
<STYLE type="text/css">

</STYLE>
<style type="text/css">
<!--
body { background-color: transparent; }
--!>
</style>

</HEAD>
<BODY STYLE="background-color:transparent">

<CENTER><B>WELCOME TO DREAMS COME TRUE BLAH BLAH BLAH</B></CENTER>
<BR>
<BR>
To navigate use the links above labeled 'DIVING', 'SPOIL YOURSELF', 'WATERSPORTS' and 'FLIGHT'

</BODY>
</HTML>

Thankyou for any help Im getting really fustrated

Oh and heres a screen dump of the problem, I've put a red circle around the frame thats in the wrong place

http://www.sugar-pop.net/alanna/DUMP.gif

MaGiCSuN

03-15-2003, 07:45 AM

the problem is that divs are always on TOP of everything, but because you have set IMAGE as div AND iframe as div they are below each other. So i tried to make it as possible as i could get it. I don't know if the following code it exactly right, because i can't see the actual images. And the link you gave is gives an "error" page. So try the following code and if there is something wrong please tell me:

<html>
<head>
</head>
<body topmargin=0 leftmargin=100>

<table border=0 width=820 cellspacing=0 cellpadding=0 style="background:#ffffff;
border-color:000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;">
<tr><td valign="top"><IMG SRC="TOP2.GIF" BORDER="0"></td></tr>
<tr><td valign="top"><IMG SRC="MIDDLE2.GIF" BORDER="0"></td></tr>
<tr><td valign="top"><IMG SRC="BOTTOM2.GIF" BORDER="0"></td>
</tr>
</table>

<div style="position:absolute; top:109; left:100; width:822; height:20; background:#ffffff;
border-color:000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;">DREAMS COME TRUE DREAMS COME TRUE DREAMS COME TRUE DREAMS COME TRUE... <a href="diving.html" target="1">DIVING</A> <A HREF="SPOIL.html" TARGET="1">SPOIL YOURSELF</A> <A HREF="WATER.html" TARGET="1">WATERSPORTS</A> <A HREF="FLIGHT.html" TARGET="1">FLIGHT</A> </DIV>

<iframe src="MAIN.html" style="position:absolute; top:182; left:100; width:820; height:523; background:#ffffff;
border-color:000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;" name="1" width="800" height="400" border=0 frameborder=0 framespacing=0 ALLOWTRANSPARENCY="true"></iframe>

</body>
</html>

oh yeah and for your iframe page MAIN.html you have allot of body style codes seperate from each other. You can add them all into the same tag, that will look nicer and easier for you to find stuff in it:

<style type="text/css">

</style>

good luck !!

Love,
Mirna