HELP: troubles in implementing iframe to my existing layout

[morrysillusion]

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':wink:;
				--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 and the psot is kinda long, so feel free to point me off site to guides etc (or email me- mkc@morrysillusion.net!). 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.

[Melooon]

Hi! Lemmy see, there are a few issues here.

Ok, so to start with! Your pages are not complete HTML; that's fine its a really common mistake and its easy to fix. Id suggest you take a look at my website guide which explains how a html page needs to be structured! https://thoughts.melonking.net/guides/introduction-to-the-web-revival-3-make-a-website

At the moment your missing the <body> and you haven't closed out the <html> tag, so the browser has to guess where to put things; that's gonna make your life a real pain!

(Aside: I'm guessing this is a Sadgrl layout? Sadness is fantastic, but I don't recommend starting with her layouts if your new, its really gonna make your life harder, but we will continue since you've come this far!)

Ok so to answer your questions! You're totally on the right track, keep going your almost there!

Question 1:

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 think what your asking about is called a target, the way you do that is by giving the iFrame a name (like name="main":wink:, and then using target="main" on your links. That will make the link open in the iFrame called main.

Code

<a href="links.html" target="main">My Links Page</a>

Question 2:

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)

This ones easy, give your iframe an id (like id="mainframe":wink: then make it width 100%, height: 100% in your CSS.

Code

#mainframe {
 width: 100%;
 height: 100%;
}

Then put it in your html code like this:

Code

<div id="content-container">
 <iframe src="home.html" id="mainframe" name="main"></iframe>
</div>

As for the colour, just remove the background colour from the page you're trying to open in the iFrame, if it has no background it will be clear.

Question 3:

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.

So whatever you put as the src of the iFrame is what will load first, so you need to put your homepage code (the stuff you have on your main content section right now) in a html file called like "home.html" and then load it as the src. Then you can load your other pages in the way I mentioned in Q1.

Ooph I hope that helps! Iv been doing this for such a long time, sometimes I forget what its like to be fresh at it

[morrysillusion]

thank you for the reply! so weird i didnt notice the closing tags/body tag was missing- because yea this was a generated code page from sadgrl, so im not sure if i just messed up the copy paste or what lol! i coded my other pages from scratch tho and theyre all fine in that regard, and had jumped to a generated one just for this page because i didnt want to from scratch for what was a simple blog page- but yes im generally familiar with all the html stuff, learned quite a bit and coded all my stuff up to this point! just some little issues giving me confusion...

you explanations for each question make sense, and i will go give that a shot soon! there were definitely minor steps i felt i was missing but no pages about iframes really have a good run down on the process or errors... i understand how iframes worked in theory but, my own fiddling brought results that confused me haha. even simple things like having the home page content as an iframe element too- makes me think "ugh, of course" haha.

i appreciate the help! so far the only person to answer my lengthy post but i cant help explaining every little detail to get my point across!!

[morrysillusion]

I am still struggling with being able to have links call up specific information by clicking on them, and im not sure why- because i udnerstand what it should be doing in theory but its not doing it, i must be missing some simple step here.

currently i have two html files for iframes- an about page, and the "main body" aka, the content i want to display on the home page indefinitely until someone clicks a different link (like the "about" link).

i have also made a iframe specific css file so that all iframes will have no background/etc, along with adding css so the main sheet so the content fills that main homepage div box. so far so good until i try to target the links. i have the target for the about page set in the header, along with a target for the main body info on the back button too. the iframes as far as i can see have the right targets and all- but not only is the 'mainbody' html not appearing at all (its broken for some reason and leads to my 404 page) but both are appearing at the same time regardless of the targets for links?

its always one misstep that gets me all tangled up and confused;; hoping i just misunderstood where to place something and this will be straightened out easily.

here is the current homepage html:

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="/coffini_outlet/mainbody.html" target="iframe_main">Back</a></li>
        -
        <li><a href="/coffini_outlet/new_aboutc.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 id="wrapper"><iframe src="mainbody.html" id="mainframe" name="iframe_main" title="Iframe Main"></iframe>
          <iframe src="new_aboutc.html" id="mainframe" 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>
  

i dont think i need to copy my main page's css or the individual html files, since i think its something in the homepage thats wrote here, but let me know if you need more information.

[Melooon]

I think I'd need to see what your trying to do here, this seems like a really unusual use of iframes!

Typically people have one iframe, and they load different pages into that iframe; but are you trying to have multiple iframes with different pages loading into them? Whats the goal of having links that open in iframes if the iframes already load those linked pages by default?

Also side note; you cant have two things on a page with the same id; an id can only ever be used once per page!

[morrysillusion]

perhaps there is a misunderstanding in the use of iframes on my end, in terms of implementing them in code? so i am hearing, there needs to be one iframe in the code, that will then call in different pages (but not more than one iframe element to do so?)-- this is what im trying to do, but im not understanding how to get those various pages into the same box, when links are clicked. i think i am not understanding how to use the iframe code for calling more than one page into the same frame- im not having much luck on finding this information when i search either (i may not know the right keywords for this). (not all the iframe articles ive been reading have been too detailed or cover what im thinking... if anyone happens to have suggestions on articles i will totally read them lol)

in my case this is what im trying to do, in case theres confusion:
i plan to have a menu up top that has various links- one that puts the main body of text in the main content box (a sort of 'home' button if needed, with greetings, and further links to different posts that i also plan to have called into that same box if possible), and then a link to the about page that would call into the main content box (overwriting/taking over the space of the greeting text).
this would *also* mean having a frame that calls more links that i'd also want to be called into that same div, since the greet/main text would link to more things- but i dont want to focus on that just yet (or if thats not a good thing to do, ill reconsider my set up)

if im understanding you, youre saying there shouldnt be two separate <iframe>'s (the one i have for the about, and the one i have for the main text- in the same div) for each link? but, i am still unclear how i use the navigation links with the iframe, if there is only supposed to be one element with the iframe tag. im very much a straight forward/step by step learner... if theres any clear example of a page that goes what im describing ill take a look. if for whatever reason, iframes arent a good use of what im trying to do, then let me know lol.

i can see what the target information on the links will do (ex. <a href="thepage.html" target="main">A Link</a>:wink:, but i think i am not actually implementing it properly into my code for it to work. if i have two links in my nav bar, both with their targets to the respective html pages, how do i write the iframe in the main content div i have created, to display that info? i understand it with one link, but it worked without anything needing to be clicked on too which was my first issue. and even so, after putting in one file to be called, it was unclear to be on how to make the next step towards adding a second link to be called into the same iframe (these all need to be called into one iframe, right?). i think thats the main thing im misunderstanding here.

[Melooon]

So stripped down to the absolute basics, this is what your code needs:

Code

<html>
	<head></head>
	<body>
		<a href="mainbody.html" target="iframe_main">Back</a>
		<a href="new_aboutc.html" target="iframe_main">About the name</a>
		<iframe src="mainbody.html" name="iframe_main"></iframe>
	</body>
</html>

An iFrame is essentially just a tab or a window within your website.
You have an iFrame called "iframe_main" and two links. The links are targeted at the "iframe_main" so their hrefs will open inside it. The iframe also opens the mainbody.html by default.

Hopefully that helps

[morrysillusion]

thank you for the reply! yes it was definitely that i was misunderstanding that all links would use the same iframe, and that the iframe itself was its own box of sorts to call all that information into! everything seems to work as i expect now ^^

[Melooon]

Works for me too! We got there in the end