Back To Website Design Forum

Help with iframe

  • gem
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 20, 2004
  • Posts: 9
  • Status: Offline

Post June 20th, 2004, 1:55 pm

hello...ive look through the messages here to see if i culd figure out my problem with out posting it...but i didnt see it....

what i am trying to do is make my main page link into an iframe....the actualy frame be the size of a background picture...links at the top and then scroll at the bottom...ive figured it out to where i can link it to the left...but it is not showing correctly... :?

the size of the first iframe or picture is 539X379
then the next background is 528X282 where the actual scrollable text will be....

here is the code for the main page that i have for the first one that links into the sencond one

Code: [ Select ]
<style type="text/css">
A:link
{COLOR: C4BCA1; TEXT-DECORATION: none}
A:visited
{COLOR: C4BCA1; TEXT-DECORATION: none}
A:active
{COLOR: C4BCA1; TEXT-DECORATION: none}
A:hover
{
    CURSOR: crosshair;
    COLOR: CCCC99;
    BORDER-5B5243: #5B5243 1px dotted;
    FONT-FAMILY: "Book Antiqua";
    BACKGROUND-COLOR: transparent;
    TEXT-DECORATION: blink;
    font-style: italic;
}

body
{
    background-color: D8D8C0;
    background-repeat:no-repeat;
    background-position:absolute;
    background-attachment:fixed;
    font-family:"Book Antiqua";
    color: 5B5243;
    letter-spacing: 0pt;
    scrollbar-3d-light-color: #FFFFFF;
  scrollbar-arrow-color: #000000;
  scrollbar-base-color: #CCCC99;
  scrollbar-dark-shadow-color: #CCCC99;
  scrollbar-face-color: #E0E0D0;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color: #999900;
    text-decoration: none;
}
</style>
</head>
<body bgcolor="#D8D8C0">

<center>
<iframe src="main2.htm" name="inline" width="684" height="496" frameborder="0" border="0" scrolling="no"></iframe>
</center>
</body></html>
  1. <style type="text/css">
  2. A:link
  3. {COLOR: C4BCA1; TEXT-DECORATION: none}
  4. A:visited
  5. {COLOR: C4BCA1; TEXT-DECORATION: none}
  6. A:active
  7. {COLOR: C4BCA1; TEXT-DECORATION: none}
  8. A:hover
  9. {
  10.     CURSOR: crosshair;
  11.     COLOR: CCCC99;
  12.     BORDER-5B5243: #5B5243 1px dotted;
  13.     FONT-FAMILY: "Book Antiqua";
  14.     BACKGROUND-COLOR: transparent;
  15.     TEXT-DECORATION: blink;
  16.     font-style: italic;
  17. }
  19. body
  20. {
  21.     background-color: D8D8C0;
  22.     background-repeat:no-repeat;
  23.     background-position:absolute;
  24.     background-attachment:fixed;
  25.     font-family:"Book Antiqua";
  26.     color: 5B5243;
  27.     letter-spacing: 0pt;
  28.     scrollbar-3d-light-color: #FFFFFF;
  29.   scrollbar-arrow-color: #000000;
  30.   scrollbar-base-color: #CCCC99;
  31.   scrollbar-dark-shadow-color: #CCCC99;
  32.   scrollbar-face-color: #E0E0D0;
  33.   scrollbar-highlight-color: #FFFFFF;
  34.   scrollbar-shadow-color: #999900;
  35.     text-decoration: none;
  36. }
  37. </style>
  38. </head>
  39. <body bgcolor="#D8D8C0">
  41. <center>
  42. <iframe src="main2.htm" name="inline" width="684" height="496" frameborder="0" border="0" scrolling="no"></iframe>
  43. </center>
  44. </body></html>


and here is the second one that i cant seem to figure out how to make the top of it fixed for the links and the bottom for the actual scrollable frame...i figured out for the left, just not the top...(the css is the same for the second as the first)

Code: [ Select ]
<body><IMG
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
alt="" src="images/bg2.jpg"><BR>
<div style="position: absolute; top: 103px; left: 153px;">
<center>
<iframe src="body.htm" name="main" width="524" height="386" frameborder="0" border="0" scrolling="yes"></iframe>
</div>
<div style="position: absolute; top: 95px; left: 30px;">
</div>



</body></html>
  1. <body><IMG
  2. style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
  3. alt="" src="images/bg2.jpg"><BR>
  4. <div style="position: absolute; top: 103px; left: 153px;">
  5. <center>
  6. <iframe src="body.htm" name="main" width="524" height="386" frameborder="0" border="0" scrolling="yes"></iframe>
  7. </div>
  8. <div style="position: absolute; top: 95px; left: 30px;">
  9. </div>
  13. </body></html>


thanks in advance for any help
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 20th, 2004, 1:55 pm

  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 20th, 2004, 3:59 pm

i notice that one is called main and one is called inline. THe main page one is called "inline"... I take it this is where you want the links in the other frame to open up? What you do is in the link you put target="inline"... eg:

Code: [ Select ]
<body><IMG
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
alt="" src="images/bg2.jpg"><BR>
<div style="position: absolute; top: 103px; left: 153px;">
<center>
<p><a href="test.htm" target="inline"></a></p>
<iframe src="body.htm" name="main" width="524" height="386" frameborder="0" border="0" scrolling="yes"></iframe>
</div>
<div style="position: absolute; top: 95px; left: 30px;">
</div>
  1. <body><IMG
  2. style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
  3. alt="" src="images/bg2.jpg"><BR>
  4. <div style="position: absolute; top: 103px; left: 153px;">
  5. <center>
  6. <p><a href="test.htm" target="inline"></a></p>
  7. <iframe src="body.htm" name="main" width="524" height="386" frameborder="0" border="0" scrolling="yes"></iframe>
  8. </div>
  9. <div style="position: absolute; top: 95px; left: 30px;">
  10. </div>


Notice I have added a link in there just to let you see how it works.... let me know if this helps![/code]

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 135 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.