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