IFrame sizing help

  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

Wuts up? Well, my resolution is at 1152 x 864 to do all my website design work stuff. Unfortunetly I didnt know if someone viewed an IFRAME on the site at say...1024x768, the IFRAME is completely out of center from the 1152x864. Is there a code or something that I can do to prevent that? Please let me know. :!:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

You would a percentage based dimension instead of a pixel dimension.

Code: [ Select ]
<iframe width="90%">


vs.

Code: [ Select ]
<iframe width="190">



Please don't use ALL CAPS for you thread subjects.
Thanks.

//corrected subject
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

Sweet man, thanks
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

ehh...It's still doing it. No matter if i put the %'s or not. I heard of absolute positioning for the iframe and the floatframe. Please help
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Could you post the page's code?
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

Code: [ Select ]
<HTML>
<HEAD>
<TITLE>Agnus Dei</TITLE>
</HEAD>

<BODY BGCOLOR=#660000>

<BODY STYLE="scrollbar-base-color: white;
scrollbar-face-color: firebrick;
scrollbar-arrow-color: white;
scrollbar-3dlight-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-darkshadow-color: white">


<div id="floatframe">

<iframe width=400 height=250 allowtransparency="true" src="news.html" frameborder=0 scrolling=auto name=agnusdei> </iframe>

</div>

<style type="text/css">

#floatframe {position:absolute;

    left: 370px;

    top: 380px;

    width: 150px;

    height: 200px;

    z-index: 100

    }

  </style>

<BODY STYLE="
scrollbar-base-color: white;
scrollbar-face-color: firebrick;
scrollbar-arrow-color: white;
scrollbar-3dlight-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-darkshadow-color: white">

<DIV ALIGN=CENTER>




<MAP NAME="homemap1">
<AREA
  HREF="news.html" TARGET="agnusdei" TITLE="news"
  SHAPE=RECT COORDS="20, 361, 85, 380">
<AREA
  HREF="merch.html" TARGET="agnusdei" TITLE="merch"
  SHAPE=RECT COORDS="20, 491, 105, 509">
<AREA
  HREF="contact.html" TARGET="agnusdei" TITLE="contact"
  SHAPE=RECT COORDS="20, 625, 121, 642">
<AREA
  HREF="bio.html" TARGET="agnusdei" TITLE="bio"
  SHAPE=RECT COORDS="11, 536, 61, 555">
<AREA
  HREF="links.html" TARGET="agnusdei" TITLE="links"
  SHAPE=RECT COORDS="18, 581, 85, 598">
<AREA
  HREF="multimedia.html" TARGET="agnusdei" TITLE="multimedia"
  SHAPE=RECT COORDS="14, 449, 86, 464">
<AREA
  HREF="shows.html" TARGET="agnusdei" TITLE="shows"
  SHAPE=RECT COORDS="21, 405, 101, 423">
<AREA
  HREF="ourcalling.html" TARGET="agnusdei" TITLE="..."
  SHAPE=RECT COORDS="15, 673, 45, 691">
</MAP>

<IMG SRC="home1.gif"
  ALT="agnus dei" BORDER=0
  USEMAP="#homemap1"><BR>

</DIV>


<MAP NAME="homemap1">
<AREA
<AREA HREF="www.purevolume.com/agnusdei.html" TITLE="AgnusDeiMusic"
  SHAPE=RECT COORDS="605, 695, 700, 723">
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Agnus Dei</TITLE>
  4. </HEAD>
  5. <BODY BGCOLOR=#660000>
  6. <BODY STYLE="scrollbar-base-color: white;
  7. scrollbar-face-color: firebrick;
  8. scrollbar-arrow-color: white;
  9. scrollbar-3dlight-color: white;
  10. scrollbar-highlight-color: white;
  11. scrollbar-shadow-color: white;
  12. scrollbar-darkshadow-color: white">
  13. <div id="floatframe">
  14. <iframe width=400 height=250 allowtransparency="true" src="news.html" frameborder=0 scrolling=auto name=agnusdei> </iframe>
  15. </div>
  16. <style type="text/css">
  17. #floatframe {position:absolute;
  18.     left: 370px;
  19.     top: 380px;
  20.     width: 150px;
  21.     height: 200px;
  22.     z-index: 100
  23.     }
  24.   </style>
  25. <BODY STYLE="
  26. scrollbar-base-color: white;
  27. scrollbar-face-color: firebrick;
  28. scrollbar-arrow-color: white;
  29. scrollbar-3dlight-color: white;
  30. scrollbar-highlight-color: white;
  31. scrollbar-shadow-color: white;
  32. scrollbar-darkshadow-color: white">
  33. <DIV ALIGN=CENTER>
  34. <MAP NAME="homemap1">
  35. <AREA
  36.   HREF="news.html" TARGET="agnusdei" TITLE="news"
  37.   SHAPE=RECT COORDS="20, 361, 85, 380">
  38. <AREA
  39.   HREF="merch.html" TARGET="agnusdei" TITLE="merch"
  40.   SHAPE=RECT COORDS="20, 491, 105, 509">
  41. <AREA
  42.   HREF="contact.html" TARGET="agnusdei" TITLE="contact"
  43.   SHAPE=RECT COORDS="20, 625, 121, 642">
  44. <AREA
  45.   HREF="bio.html" TARGET="agnusdei" TITLE="bio"
  46.   SHAPE=RECT COORDS="11, 536, 61, 555">
  47. <AREA
  48.   HREF="links.html" TARGET="agnusdei" TITLE="links"
  49.   SHAPE=RECT COORDS="18, 581, 85, 598">
  50. <AREA
  51.   HREF="multimedia.html" TARGET="agnusdei" TITLE="multimedia"
  52.   SHAPE=RECT COORDS="14, 449, 86, 464">
  53. <AREA
  54.   HREF="shows.html" TARGET="agnusdei" TITLE="shows"
  55.   SHAPE=RECT COORDS="21, 405, 101, 423">
  56. <AREA
  57.   HREF="ourcalling.html" TARGET="agnusdei" TITLE="..."
  58.   SHAPE=RECT COORDS="15, 673, 45, 691">
  59. </MAP>
  60. <IMG SRC="home1.gif"
  61.   ALT="agnus dei" BORDER=0
  62.   USEMAP="#homemap1"><BR>
  63. </DIV>
  64. <MAP NAME="homemap1">
  65. <AREA
  66. <AREA HREF="www.purevolume.com/agnusdei.html" TITLE="AgnusDeiMusic"
  67.   SHAPE=RECT COORDS="605, 695, 700, 723">





There ya go...hope that helps.
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

oh yeh...i unnno if this helps or not but the address is...

http://www.agnusdeionline.com
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

You're defining a width for the IFrame in two places here.

First, in the IFrame tag itself, and then again in the CSS deninition 6 lines below the IFrame tag. I would nix the first one, and set the second to a percentage.
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

awesome...sorry, if i keep bugging you...but how would i go about doing this? once again sorry for the dumb questions.

Thanks
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

:) Hey, no problem. That's what Ozzu if for.

How are you editing your site?
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

sorry for the wait...all im using is notepad. I just started to learn all this html about 2 months ago so im fairly new at it.
  • newsocks
  • Born
  • Born
  • newsocks
  • Posts: 2

Post 3+ Months Ago

ok - iam having the same problem and cant seem to "get it"

if i post my code can you help me too? hehe.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Ok guys, sorry for my delay...my cable was out last night - so, no data access.
:(

First of all, the code you posted here is awful. I'm not trying to insult you but...it's really bad. You've got 3 BODY tags. Two of the BODY tags are defining scroll styles. So anyway, I've reduced it what I thought was needed.

Code: [ Select ]
<HTML>
<HEAD>
    <TITLE>Agnus Dei</TITLE>
    <style type="text/css">
        body{background:#600;scrollbar-base-color:white;scrollbar-face-color:firebrick;scrollbar-arrow-color:white;scrollbar-3dlight-color:white;scrollbar-highlight-color: white;scrollbar-shadow-color:white;scrollbar-darkshadow-color:white;}
        #floatframe{position:absolute;left:370px;top:380px;z-index:100;}</style>
</HEAD>

<BODY>

<div>
    <iframe width="50%" height="250" allowtransparency="true" src="news.html" frameborder="0" scrolling="auto" name="agnusdei"></iframe></div>

</body>
</html>
  1. <HTML>
  2. <HEAD>
  3.     <TITLE>Agnus Dei</TITLE>
  4.     <style type="text/css">
  5.         body{background:#600;scrollbar-base-color:white;scrollbar-face-color:firebrick;scrollbar-arrow-color:white;scrollbar-3dlight-color:white;scrollbar-highlight-color: white;scrollbar-shadow-color:white;scrollbar-darkshadow-color:white;}
  6.         #floatframe{position:absolute;left:370px;top:380px;z-index:100;}</style>
  7. </HEAD>
  8. <BODY>
  9. <div>
  10.     <iframe width="50%" height="250" allowtransparency="true" src="news.html" frameborder="0" scrolling="auto" name="agnusdei"></iframe></div>
  11. </body>
  12. </html>


In this bit, I've made the DIV that contains the IFRAME generic and set the width of the IFRAME to 50%. When you launch this, the IFRAME will always be 50% of the viewable area.

Before, when you were using an absolutely placed DIV, the % dimension was calculating the viewable area from where the DIV was placed, so you weren't really getting a % of the browser area, but a % of the area in the DIV.
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

Haha thanks man. I appreciate it. I THINK it works now...but if you can, check it out and see if it actually worked or not.

http://www.agnusdeionline.com

if it didnt please tell me and i'll repaste the new code and what not. Thanks
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

It's working as far as the iframe expanding, however when the window grows beyond 1100 pixels, or so, the iframe overlaps the menu to the left. It's really not rendering very well in Mozilla.

You know, you could make the entire page do the same thing. So, everything would expand with the window?

It feels kind of awkward to have a % iframe on a fixed-width background, IMO.
  • hxcmusicisswell
  • Newbie
  • Newbie
  • hxcmusicisswell
  • Posts: 12

Post 3+ Months Ago

cool...haha so what does that mean? Sorry for the stupid questions. I know nothing about this stuff (as you can tell)
  • newsocks
  • Born
  • Born
  • newsocks
  • Posts: 2

Post 3+ Months Ago

look at my being the lagger.

this is my drama http://www.thriftstorewhore.net/lauper is the test page...take a look? the iframe yah wackyness

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 27 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.