HTML Help

ayni · Joined: 03 Aug 2009 Posts: 3

Hi

I am working on an internal site where I do not have access to the source file and need to instead frame the content.

All is ok, except one annoyance. The second frame will not act like the first, as it should.

The example code is:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<div id="container">
<iframe align="left" src="http://www.imdb.com/" scrolling="no" width="545" height="780"></iframe>
<iframe align="right" src="http://www.imdb.com/" scrolling="no" width="550" height="780"></iframe>
</div>
</body>
</html>

The second frame needs to have the same neg. margin as the first, otherwise it appears to put in a border. The top margin seems to work correctly.

I have also tried the following:

<style>
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}

#leftiframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}

#rightiframe
{
position:right;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
<div id='outerdiv'>
<iframe src="http://www.yahoo.com/" id='leftiframe' scrolling=no></iframe>
<iframe src="http://www.yahoo.com/" id='rightiframe' scrolling=no></iframe>
</div>

However I think the position tag is laying the second iframe on top of the other. It seems I cannot move it unless I change the left and top measurements, which of course means it will be framing the wrong content.

Any help would be appreciated.

Thanks

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Have you tried adding the frameborder="0" attribute?

<IFRAME ...> Tutorial

See also "how to format frame border of <iframe>?"

ayni · Joined: 03 Aug 2009 Posts: 3

Hi.

Thanks for your reply.

It actually isn't a border issue - its an alignment issue. Or in this case, it was a problem using one div with two frames. I am sure this could have been done several ways, but I finally got it to work with this:

<style>
#leftdiv
{
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:5;
border:none;
}

#rightdiv
{
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:520;
border:none;
}

#leftiframe
{
position:absolute;
top:-250px;
left:-15px;
width:524px;
height:790px;
border:none;
}

#rightiframe
{
position:absolute;
top:-250px;
left:-15px;
width:524px;
height:790px;
border:none;
}
</style>
<div id='outerdiv'>
<iframe src="http://site_url" id='leftiframe' scrolling="no"></iframe>
</div>
<div id='rightdiv'>
<iframe src="http://site_url" id='rightiframe' scrolling="no"></iframe>
</div>

Pretty annoying, but now I understand css positioning and div tags a whole lot better (relatively)! :)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Glad you got it fixed. In your "<style>" tag, always put the attribute in: "<style type="text/css">".

In case you want some more reading. :P

CSS Tutorials:

http://www.w3schools.com/Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss
http://htmldog.com/guides/cssbeginner/
http://www.davesite.com/webstation/css/

Web-Based Tools for Optimizing, Formatting and Checking CSS: http://sixrevisions.com/css/css_code_optimization_formatting_validation/

ayni · Joined: 03 Aug 2009 Posts: 3

Will do!

Thanks for the site, I have a couple of them bookmarked - i'll add the rest.

Thanks again :)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

You're welcome again. Post back if you still need assistance on this topic. Good luck.