[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • Last Modified:

multiple iframes on a single page

Hi There,

I'm new to iframes and would like to know how I can organise a page to have multiple iframes on it?

I'm after something like the following:

|-----------|--------------------------------|--------------------|
|     logo   |                                       |                          |
|              |                                       |                          |
|-----------|                 content            |          side bar     |
|              |                                        |                          |
|              |                                        |                          |
|   menu   |                                        |                          |
|              |                                        |                           |
|-----------|--------------------------------|----------------------|


Could someone help me out with some code please?

Sean

0
bullrout
Asked:
bullrout
  • 12
  • 10
  • 2
  • +3
1 Solution
 
str_kaniCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<TABLE>
<TR>
    <TD><iframe src="logo.html" height="100"></iframe></TD>
    <TD rowspan="2"><iframe src="content.html" height="200"></iframe></TD>
    <TD rowspan="2"><iframe src="sidebar.html" height="200"></iframe></TD>
</TR>
<TR>
    <TD><iframe src="menu.html" height="100"></iframe></TD>
    <TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
0
 
COBOLdinosaurCommented:
<div style="width:15%;float:left>
<iframe id="logo" etc...></iframe>
<iframe id="menu" etc...></iframe>
</div>
<div style="width:40%;float:left">
<iframe id="content" etc...></iframe>
</div>
<div style="width 38%;float:left">
<iframe id="sidebar" etc...></iframe>
</div>

Should get you pretty close

Cd&
0
 
bullroutAuthor Commented:
Hi There str_kani,

I really wanted use pure css to do this, not tables, can you help ?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
softplusCommented:
bullrout, why do you want to do this with iframes? (just wondering)
0
 
bullroutAuthor Commented:
Hi softplus,

I already have an iframe that is centered on my screen, the page that is loaded in the iframe is the page that I want to seperate into iframes. Is it better to use frames instead of iframes?

Sean
0
 
COBOLdinosaurCommented:
>>>Is it better to use frames instead of iframes?
Almost never.  Frames will create a very rigid an difficult ot maintain site, and limit you ability to do dynamic effects.

Cd&
0
 
seanpowellCommented:
Actually frames will sit side by side as a default - one of the few elements that do, so we can simplify the layout a little here:

<div style="width:100px; float:left;">
      <iframe name="iframe1" src="blank.html" style="height: 300px; width: 100px;"></iframe>
      <iframe name="iframe2" src="blank.html" style="height: 300px; width: 100px;"></iframe>
</div>
<iframe name="iframe3" src="blank.html" style="height: 600px; width: 300px;"></iframe>
<iframe name="iframe4" src="blank.html" style="height: 600px; width: 300px;"></iframe>

Sean
0
 
COBOLdinosaurCommented:
Ahem!

>>> Actually frames will
 Actually iframes will

;^)

Cd&
0
 
bullroutAuthor Commented:
Hi COBOLdinosaur,

I have tried the code that was submitted by you and need some help with it of possible. I'm trying to extend the size of the boxes  
individually and i'm having no luck, could you help me me out with size and width attributes for each iframe?

I have a test page that i'm trying to get right at the link below:

http://www.themoviebase.com/test/test.htm

Sean
0
 
COBOLdinosaurCommented:
What is it you are trying to do with that code?  If you can describe the requirements, we can probably help, but I don't understand what you are trying to do.

Cd&
0
 
bullroutAuthor Commented:
Hi COBOLdinosaur,

i'm trying yo make the page into seperate parts so that I can rel-load certain frames when the mouse is clicked.

Sean

|-----------|--------------------------------|--------------------|
|     logo   |                                       |                          |
|              |                                       |                          |
|-----------|                 content            |          side bar     |
|              |                                        |                          |
|              |                                        |                          |
|   menu   |                                        |                          |
|              |                                        |                           |
|-----------|--------------------------------|----------------------|

0
 
GrandSchtroumpfCommented:
I would use a frameset with normal frames.
There is no point in defining a page that only contains iframes.
0
 
COBOLdinosaurCommented:
GS,

I would agree with that recommendation if the frames were not being resized dynamically.  While it is possible to modify the sizing within a frameset, it is not an easy thing to manage or to get right consistently. While a page with nothing but iframes is not very mainstream, the dynamic nature of the page may justify doing it that way.

bullrout,

I understand the layout, but I don't understnad what you are trying achieve with the scripting to manipulate dimensions. What is the purpose of all of that?

Cd&
0
 
bullroutAuthor Commented:
Hi cd,

The logo frame has an animation that loops, the menu frame is pretty much static and the content area has a series of photos that fade in and out, the sidebar will be used for advertising. I was only trying to seperate the frames so that I was able to load the content seperate.

Does that make sense?

Sean
0
 
GrandSchtroumpfCommented:
> Does that make sense?
Yes and no...

It kind of makes sense if your users have a very very low bandwidth.
But in your case, since your site seem to use lots of images, using a little bit more html won't make a huge difference:

For you logo image, that's not a problem, it's just an <img> tag.
For your menu... the size should not be huge.
For your ads, i think it's better to refresh them on every page, so they can change.

So i would not go for a complicated solution with frames or iframes.
I would just use server-side scripting to build the pages (SSI, PHP, or equivalent).
0
 
COBOLdinosaurCommented:
Yeah, you don't really need the frames, and you will have a much simpler, easier to maintain layout with div layers and server side generation.

Cd&
0
 
bullroutAuthor Commented:
Hi all,

I'm just not too sure on how to layout my page with that configuration, could someone help me out with some working code so I can understand it better?

Sean

|-----------|--------------------------------|--------------------|
|     logo   |                                       |                          |
|              |                                       |                          |
|-----------|                 content            |          side bar     |
|              |                                        |                          |
|              |                                        |                          |
|   menu   |                                        |                          |
|              |                                        |                           |
|-----------|--------------------------------|----------------------|
0
 
COBOLdinosaurCommented:
Very similar to the iframe code exept now everything goes directly in the divs
 <div style="width:15%;float:left>
   <div id="logo" ></div>
   <div id="menu"></div>
</div>
<div id="content" style="width:40%;float:left">
</div>
<div d ="sidebar" style="width 38%;float:left">
</div>

Cd&
0
 
bullroutAuthor Commented:
Hi There,
Thanks for helping me out with some code, I have placed the code into my page and it looks great in 1024 X 769 screen resolution but when I view it in 800 X 600 it goes haywire. I would like the layout to stay intact even if the screen resolution has changed, allowing me to calculate the image sizes correclty.

example: http://www.themoviebase.com/test/test.htm

How can I manage this?

Sean
0
 
bullroutAuthor Commented:
Hi COBOLdinosaur,

if you would like me to open a new question for the above I'm quite happy, you have already earned you points that's for sure.

Sean
0
 
COBOLdinosaurCommented:
You have me very confused the link you posted is not using CSS leta lone the CSS we are giving you, it is all scripted dimensioning.  Are we working on two different layout, or what?

Cd&
0
 
seanpowellCommented:
There's this in the iframe Cd&:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
      <head>
            <title>Untitled Document</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      </head>
      <body bgColor="#510D00">
<div style="width:20%;float:left;height:468px;border-left:solid #F7F1E5;">
   <div id="logo" style="height:100px;">logo<!--<IMG alt="" src="temp_images\sideplacer.gif">--></div>

   <div id="menu">menu</div>
</div>
<div id="content" style="width:70%;float:left;height:468px;border:solid #F7F1E5;">
content
<!--<IMG alt="" src="temp_images\contentplacer.gif">-->
</div>
<div id ="sidebar" style="width:10%;float:left;height:468px;border-right:solid #F7F1E5;border-top:solid #F7F1E5;border-bottom:solid #F7F1E5;">
sidebar
</div>
</body>
</html>

That's likely the problem - doctype, box model, etc, etc. I'd still like to know what the point of the scripted iframe is though.

Sean
0
 
COBOLdinosaurCommented:
Okay let's start with the doctype.  This is and incomplete edoctype and result in browsers going into quirks mode.  That results in mor cross-browser issues and more cross-resolution issues:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Let's change that to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

next let's reduce total width a tiny bit so we don't have to use hacks to get aroung IE bugs.  do the content tag this way:

<div id="content" style="width:68%;float:left;height:468px;border:solid #F7F1E5;">
content
<!--<IMG alt="" src="temp_images\contentplacer.gif">-->
</div>

Once we get the CSS the way we want it.  you should move all the CSS into the head; or better still into an external stylesheet to maike it a little easier to maintain.

Le't try that and see how far it gets us.  I thing the lack of sizing on the images might create a problem as well.

Cd&
0
 
bullroutAuthor Commented:
Hi Sean,

The whole point of the scripted frame is to have the content area in the middle of the page, is there an easier way to do this?

Sean
0
 
bullroutAuthor Commented:
Hi Cd,

I have made the changes that you have suggested and now scroll bars are appearing on the side & bottom of the frame. What else do I need to do ?

Sean
0
 
COBOLdinosaurCommented:
That's what i thought.  The images are too big.  You either have to reduce the size the images or let them get cut off by adding" overflow:hidden the the style entry for the content.

Cd&
0
 
bullroutAuthor Commented:
Hi cd,

I'm lost as how to solve the problem, I want to have content centered on the screen with only the content area scrollable. I would also like it to be fixed if the client browser is using a smaller screen resolution so that all content / images are visible.

Is it possible to acheive this ?

Sean
0
 
bullroutAuthor Commented:
Hi COBOLdinosaur,

I've decided to just use frames and the css that you recommended above.

Sean
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 12
  • 10
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now