IFrame sizing help

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 8th, 2004, 1:15 pm

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. :!:

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

June 8th, 2004, 1:15 pm

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 8th, 2004, 1:46 pm

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

Code: [ Select ]

vs.

Code: [ Select ]

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

//corrected subject

- dM

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 8th, 2004, 3:02 pm

Sweet man, thanks

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 8th, 2004, 3:19 pm

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
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 8th, 2004, 3:20 pm

Could you post the page's code?

- dM

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 8th, 2004, 3:27 pm

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">

<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">

There ya go...hope that helps.

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 8th, 2004, 3:29 pm

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

http://www.agnusdeionline.com

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 9th, 2004, 4:46 am

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.

- dM

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 9th, 2004, 5:56 am

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
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 9th, 2004, 6:19 am

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

How are you editing your site?

- dM

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 9th, 2004, 4:14 pm

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
Joined: Jun 09, 2004
Posts: 2
Status: Offline

June 9th, 2004, 11:03 pm

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
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 10th, 2004, 5:05 am

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>

<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>

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.

- dM

hxcmusicisswell
Newbie
Joined: Jun 08, 2004
Posts: 12
Status: Offline

June 10th, 2004, 5:21 pm

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
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

June 11th, 2004, 3:18 am

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.

- dM

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

June 11th, 2004, 3:18 am

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

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

IFrame sizing help

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information