/    Sign up×
Community /Pin to ProfileBookmark

Issue with positioning iframes over JPG images

Copy linkTweet thisAlerts:
Jan 05.2010

Hello all!

I am having major issues with placing iframes over jpg images.

Here is a screen capture of my project:

[img]http://i48.tinypic.com/vr5381.png[/img]

The Content under the Mixes and Video sections are both iframes I positioned over the jpg image (the entire thing is an image) with div tags.

The code for this page is below:

<html>
<head>
<title>Media Test</title>
<body bgcolor=black>
</head>
<center>
<div style=”position: absolute; left: 228px; top: 290px;”>
<iframe src=”Media-Audio.html” width=”396″ height=”529″ frameborder=”0″></iframe></div>
<div style=”position: absolute; left: 671px; top: 290px;”>
<iframe src=”Media-Video.html” width=”359″ height=”529″ frameborder=”0″></iframe></div>

<img src=”Main-Media.jpg”>
</html>

On my browser at work it shows up somewhat decent (screenshot), but on other machines, such as at home, they are way out of alignment.

I have tried absolute positioning, relative, fixed, nothing seems to change a thing.

How do you get iframes to all show up in alignment regardless of which browser you are using?

I have been struggling with this for two weeks, but no luck.

Please help! Thank you very much!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@mikedcmdvaauthorJan 05.2010 — Seriously? Noone can help? Do you understand my question at least?
Copy linkTweet thisAlerts:
@FangJan 07.2010 — Try it this way&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
* {margin:0;padding:0;}
#container {width:800px; margin:auto; margin-top:290px; background:#ccc url(Main-Media.jpg) center center no-repeat;}
#rightframe {margin-left:40px;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;iframe src="Media-Audio.html" width="396" height="529" frameborder="0"&gt;&lt;/iframe&gt;
&lt;iframe id="rightframe" src="Media-Video.html" width="359" height="529" frameborder="0"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@mikedcmdvaauthorJan 11.2010 — Fang,

Thank you for your reply!

Unfortunately, your code revision has quite an adverse effect.

See image:

http://farm5.static.flickr.com/4003/4266193488_5e68b079da_o.png
Copy linkTweet thisAlerts:
@FangJan 11.2010 — The code positions the frames with the image centered behind them.
Copy linkTweet thisAlerts:
@mikedcmdvaauthorJan 11.2010 — I don't understand the purpose though, what do I do with this, Fang?

Also, the frames are not aligned with the image, if you can see, they position above the areas where they belong on the image.
Copy linkTweet thisAlerts:
@FangJan 11.2010 — Change the background position property to align the image.
Copy linkTweet thisAlerts:
@mikedcmdvaauthorJan 11.2010 — Would the background position code be included in that code you pasted?

If you take a look at that screenshot I posted, the background is completely chopped off by white space on all sides.
×

Success!

Help @mikedcmdva spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...