Iframe doesn't open correctly

HTML & CSS
1

I am using an iframe with a left menu and a main menu. When the browser is opened up to a large width, when I click on the left menu it opens up just fine with welcome.asp to the right of the left menu.

My issue, if I resize to a smaller window, the welcome.asp page goes underneath the left menu.

Any suggestions to fix this would be appreciated. I am open to ideas if there is a better way of doing this.

Thank you


<iframe class="header" iframe align="top" src="leftmenu.asp" height=900 width=150 frameBorder="0" name="header" scrolling="no" target="main"></iframe>

<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">

<iframe class="main" style="visibility:hidden;" onload="this.style.visibility = 'visible';" height= 800 width= 900 src="welcome.asp" frameBorder="0" name="main" scrolling="yes"></iframe>

</table>
2

We’d need to see a working example as there’s not really enough to work out what’s happening in the code above. :slight_smile:

3

Thank you for your reply.

Here’s an example in the simplest of ways:

Index page has the iframe code
Left menu dark blue background has the word left menu
Welcome page says welcome

As you narrow the browsers window the word “welcome” move underneath the left menu.

Index.asp page:

<%@ Language=VBScript %>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

<iframe class="header" iframe align="top" src="leftmenu.asp" height=900 width=150 frameBorder="0" name="header" scrolling="no" target="main"></iframe>
<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
<iframe class="main" style="visibility:hidden;" onload="this.style.visibility = 'visible';" height= 800 width= 900 src="welcome.asp" frameBorder="0" name="main" scrolling="yes"></iframe>
</table>

</body>

</html>

Leftmenu.asp page:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

</HEAD>

<BODY  bgColor="4c659b">


<center>
    left menu

</center>



</body>
</html>

Welcome.asp page:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    welcome
</body>
</html>
4

You’d need to create a 2 column page using flexbox or similar and place the Iframe in each column.

Of course the right column Iframe should be a fluid width unless you want a viewport scrollbar.

I’m only on a mobile at the moment so can’t offer code but I’m sure you’ve created 2 column layouts before.

I’ll be back at the desktop tomorrow.

5

Why do you need to use iframes for this project?

Is there some peculiar reason which prevents you
from having a single page with the menu on the left
and the content positioned to the right?

1 Like
6

You bring up a good point and the reason is that I what the left menu static (fixed) because the content on the right would be scrollable and I don’t want the menu to move down the page.

7

I have never used flexbox before. I have used framesets which is deprecated, hence the move to iframes. When I use iframes with top and bottom menus it works fine, but I need this one on a left menu.

I did some research on flexbox with iframes and not really sure how it works having not done that before.

8

You shouldn’t be using framesets or iframes for layout techniques and indeed they won;t be any help as its the html structure that will create the layout and not the iframes.

You could just use a sticky left column or a fixed left column.

e.g.

Rough example.

Of course you would still need to decide what to do for small screens or very large screens but the basics are pretty simple. (Grid can also be used for this and indeed older methods).

.

1 Like
9

If you don’t want to dive into flex straightaway,
here is a basic example…

Full Page View
https://codepen.io/Snady_Leiby/full/MWZpQyG

Editor View
https://codepen.io/Snady_Leiby/pen/MWZpQyG

1 Like
10

I am struggling with replicating this. Does this code go on just one page? I have it on one page and the menu is at the top and the text at the bottom and then if I customize the links in opens in a new window.

12

Paul, I am struggling with replicating this. Does this code go on just one page? I have it on one page and the menu is at the top and the text at the bottom and then if I customize the links in opens in a new window.

13

Modern websites need to be designed using a Responsive design, whether you are trying to do that now or something else. In smartphones, forms are typically formatted differently for portrait orientation than for landscape orientation. There are very many articles about how to do that that would be relevant to the question, even if you are not yet trying to support portrait and landscape orientations.

When using a desktop system, the developer tools of browsers support testing smartphone layouts.

1 Like
14

Typically each different “page” of a web site is a different .html (or whatever server language you’re using) file. So yes, Paul’s example shows one such page, and you’d replicate that structure for each new topic you have (possibly that corresponds with one for each item in your navigation menu).

If you don’t want the hassle of duplicating that menu into each file, then you’d “include” a single navigation file with the relevant html in it into each page, which is a bit like how you were doing it with iframes, though you’d use a server side include, for example using php’s “include” command. If you do that, then in the end you end up with a separate file for each nav item/topic, and in each one of those you have a bit of header and framework structure, an include to incorporate your navigation (maybe additional includes for things like footers or other common elements), and the bulk of the page is the unique content for this nav item/topic.

I hope that helps?

2 Likes
15

Your basic html page might look like this…

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>the welcome page</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
 <nav>
  <ul>
   <li>
    <a href="#">link 1</a>
   </li><li>
    <a href="#">link 2</a>
   </li><li>
    <a href="#">link 3</a>
   </li><li>
    <a href="#">link 4</a>
   </li><li>
    <a href="#">link 5</a>
   </li><li>
    <a href="#">link 6</a>
   </li>
  </ul>
 </nav>

 <main>
  <h1>Page description</h1>
 </main>

</body>
</html>

…with this css file…

screen.css

* {
   box-sizing: border-box;
   margin: 0;
}
html,body {
   height: 100%;
 }
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5  sans-serif;
 }
nav ul {
   position: fixed;
   top: 0;
   width: 10em;
   height: 100%;
   padding: 1em;
   margin: 0;
   list-style: none;
   background-color: #4c659b;
   color: #fff;
   overflow: auto;
 }
nav a {
   display: block;
   padding: 0.5em;
   color: #fff;
 }
main {
   padding: 1em;
   margin-left: 10em;   
   color: #555;
 }
main h1 {
   text-align: center;
 }
main p {
   margin: 1em 0;
 }
@media ( max-width: 30em ) {
 nav ul {
    width: 100%; 
    height: auto; 
    text-align: center;
 }
nav  ul li {
   display: inline-block;
 }
 nav a {
   display: inline-block;
 }
main {
   margin: 6em 0 0;
 }
}
@media ( max-width: 23.5em ) {
main {
   margin: 8em 0 0;
  }
 }
16

Thanks for that.

What I am not understanding in your example, I want the menu to be on the left side and the content to the right of that. And then each link appear on the right side of the menu. That’s the way my frameset is set up, even though deprecated, it still works. I what do up code and was trying to use with iframes that only seemed to work with a top menu and a bottom target.

17

Why complicate matters so?

Just allow users to open links in the normal manner.

18

I understand what you are say and I know how to do normal links with includes ect. But with this, I have reasons why I want each of the links to go to the right (open) window because I have extensive database driven data. Like I said, I just want to replace the already working framesets with some more modern code. And as mentioned, the top and bottom works fine with iframes but not with left and right.

19

You will possibly need to look at AJAX then.

How AJAX Works: 10 Practical Uses For AJAX

2 Likes
20

Framesets were deprecated for good reasons and so trying to copy their behaviour using iframes is not advisable or desirable. It’ was fine in 1990 when no one knew any better but not these days.

If you load data into each section of your page then you effectively have a one page site that is almost impossible for search engines to traverse and for users to link to specific pages. There are just so many reasons why its bad and very few reasons why its good.

Sometimes for a ‘dashboard type’ page then it may be useful to load data into panels and you would do that most likely with ajax as mentioned above.

In almost all other cases you really want separate pages that users can link to and find individually and work like 99% of the web does.

As I said in my first post you could just stick your iframes inside that structure I gave you (and other members) and it would do what you want assuming you size the iframes to fit. Iframes have nothing to do with how the page is ‘laid out’ which is what your question was about. Stick one iframe in the left column (sized to fit) and one iframe in the right column (sized to fit). You then effectively have your frameset.

Of course as I said there are very few reasons why this is a good idea. :slight_smile:

1 Like
21

Thank you for your words of wisdom, I appreciate it. I’ll work on it.

1 Like