troubles in implementing iframe to my existing layout Options

[morry]

i am very much a hobbiest coder and just learning things as i go along. been working on a site for fun and i realized i wanted to use iframes on pages where i want users to call up lots of new information like articles/about pages/etc without making duplicate pages.... i already have the whole layout for a homepage but now im having trouble with the iframe i want to implement. there are two sidebars and a center box for the main content- which is where i want users to call information to by clicking whatever hightlighted links on the sidebars- filling up the main content box entirely and overwriting the base information in that box.

apologies this post will be LONG because i am adding the code i have, the website is live on neotcities but i havent added this newer code since it doesnt work. still feel free to look at it there too if you need.

Here is the css (there is specific information for the iframe too):

CODE

            :root {

                /* applies to all areas */
                --font-family: monospace;
                --font-size: 14px;
                --line-height: 1.3em;
                --font-color: #504538;
                --link-color: #a26955;
                --link-text-decoration: none;

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: #e6ded7;

                /* header */
                --header-height: 90px;
                --header-background: url('c_assets/outlet_gradient.png');
                --header-margin-bottom: 0px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 250px;
                --sidebar-padding: 10px;
                --sidebar-bg-color: #e6ded7;

                /* footer */
                --footer-height: 30px;
                --footer-bg-color: #e6ded7;

                /* navbar */
                --navitems-alignment: center;
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #e6ded7;

                /* container */
                --container-width: 1000px;
                --container-bg-color: #b79a75;

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                --sidebar-height: 100%;
                --sidebar-overflow: auto;
                --background-color: #b79a75;
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background-color: var(--background-color);
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
                text-decoration: var(--link-text-decoration);
                
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-color: var(--container-bg-color);
                
            }

            iframe {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }

            #content-container {
                width: 60%;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #left-sidebar {
                width: var(--sidebar-width);
                margin-right: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #right-sidebar {
                width: var(--sidebar-width);
                margin-left: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
            }

            #header-contained {
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color: var(--footer-bg-color);
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #navbar-contained {
                margin-bottom: var(--row-gap)
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-top: 0;
                margin-bottom: var(--navbar-margin-bottom);
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
                border: solid;
                border-bottom-color: #504538;
                border-width: 4px;
                
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }

            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }

            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }

            }

And the HTML for the homepage:

CODE

<!DOCTYPE html>


<html>
    
<head>
    <title>Coffini Outlet</title>

   <link rel="stylesheet" href="coffini_style.css">
    
</head>
        <div id="header-full" style="display: block;"></div>
        <div id="navbar-full" style="display: block;">
            <ul class="nav">
                <li><a href="https://morrysillusion.net/">Morrysillusion.net</a></li>
                -
                <li><a href="https://morrysillusion.net/coffini_outlet/coffini.html">Back</a></li>
                -
                <li><a href="/coffini_outlet/about_c.html" target="iframe_abt">About the name</a></li>
                -
                <li><a href="https://archiveofourown.org/users/morrysillusion/works">AO3</a></li>
            </ul>
        </div>
        <div id="main-container">
            <div id="header-contained" style="display: none;"></div>
            <div id="navbar-contained" style="display: none;">
                <ul class="nav">
                    <li><a href="/index.html">Home</a></li>
                </ul>
            </div>
            <div class="content-wrap flex alignment">
                <div id="left-sidebar">
                    <div class="sidebar-wrapper">
                        <p><strong><u>Contact:</u></strong></p>
                        <p>I made this blog because I like talking about things I like. Feel free to hit me up to chat!</p>
                        <p><a href="https://twitter.com/morrysillusion/">- Twitter</a></p>
                        <p><a href="https://morrysillusion.tumblr.com/">- Tumblr</a></p>
                        <p>- mkc@morrysillusion.net</p>
                        <p>- ask about discord!</p></div>
                </div>
                <div id="content-container">
                    
                    
                    <div class="wrapper"><p><strong>Welcome to the Coffini Outlet!</strong> This is my little space to blab about things I like. Really, this is a "general" fandom oriented blog for anything that doesn't have a fan page/shrine!</p>
                    
                    <p>Below you will find links to the most recent posts (newest on top), where I may talk about a thing I consumed recently, or may be analysing the thing I consumed. All 'reviews' will be the title of the media as it is, anything with a 'subtitle' of sorts is an analysis/ramble about the thing!</p>
                    
                    <p>Check the right sidebar for older posts, which get archived after the year is over.</p>
                    <h2 text align="center">MAY 2022</h2>
                        <p text align=center>[tba]</p>
                     <iframe src="about_c.html" name="iframe_abt" title="Iframe About"></iframe></div>
                </div>
                <div id="right-sidebar">
                    <div class="sidebar-wrapper"><p><u><strong>Archive:</strong></u></p>
                        <p>Links will go here.</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                        <p>post #</p>
                    </div>
                </div>
            </div>
            <div id="footer" style="display: none;">
                <div class="footer-wrapper">footer</div>
            </div>
        </div>

Additionally, one of the example pages I want to call to the main content box. i stripped it down as i assumed thats how it should be for calling into into an iframe (since i just need the text, not a whole formatted page)

CODE

<!DOCTYPE html>


<html>
    
<head>
    <title>Coffini Outlet</title>

   <link rel="stylesheet" href="coffini_style.css">
    
</head>
<body>
    <p>Welcome to my little ramble corner for things I like. You may be wondering where I got the name- its really just something that stuck after I used it on tumblr a while back.</p>
                    <p>Around 2016 or so, I wasn't really sticking with any one name online. On tumblr, it was common to have "canon URLs" aka, URLs that were exact to a thing that you liked (character name, series name, location from a thing, etc). I was hopping around all kinds of URLs due to that and eventually changed it from what it was to "coffini".</p>
                    
                    <p>The word comes from an episode of Regular Show, <a href="https://regularshow.fandom.com/wiki/Rigby%27s_Graduation_Day_Special">the season 7 finale episode.</a> During it, Mordecai goes out of his way to try and get a fictional soda called Coffini. It's a coffee soda.</p>
                    <center><img src="c_assets/coffini_can1.png"></center>
                        <p>So there's a little bit of trivia for you. I just happened to use that word as my tumblr url for some time, until I picked up my own original name... The shows and episode are one of my favorites and it felt appropriate to reference something I liked when I brought up this page again. </p></body>

I put the <iframe> in the main content div of my homepage, and i wanted to figure out a few key things:
- i want to have various links be called into the same box (about page, an article, etc), if im going in the wrong direction to do that/need to know something about that id love to know.
- i want to have the iframe take up the entire 'main content' box, and fit the style/color of it (right now, its at the bottom, and is also the same color as the site background)
- when i load up the page, the content of the iframe is *already there*, when its supposed to only appear when the "about the name" link is clicked... and i dont understand why that is since all examples show it appearing after a link is clicked.

i know i have a lot of questions here, so feel free to point me off site to guides etc. i just havent found clear answers to these problems im having, its hard for me to understand it out of context of what im specifically working on.

This post has been edited by morry: May 25 2022, 02:44 PM

[Christian J]

If you do want to use IFRAMEs there are two ways to do it, one Good and one Bad.

The Good way is to let each content page contain an iframe, which embeds the nav menu or footer page. This avoids most of the problems mentioned in the FAQ page I linked to above. The links in the embedded nav menu page will need to use

CODE

target="_top"

or

CODE

target="_parent"

in order to open each link as a parent page, and not inside the iframe.

The Bad way is to use a common parent page with the nav menu, footer, and an iframe that embeds the different content pages. This results in all the problems the FAQ describes.

[pandy]

But the content page will still be orphant if found through a SE for instance. No navigation.

[Christian J]

But the content page will still be orphant if found through a SE for instance. No navigation.

Not if the content page is the parent page. Its framed nav page would be loaded automatically.

In contrast, if the nav page was found through a SE it would indeed be orphaned, but that situation could be avoided with robots directives like NOINDEX, FOLLOW. And even if a user somehow arrived on an orphaned nav page, it would at least be full of links.

[pandy]

Of course. I was ditzy. Been that a lot in this thread, it seems.