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.
Here is the css (there is specific information for the iframe too):
: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:
<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)
<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 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.
