Databases
StackOverflow2013
Postsdbo
POMaking simple top and left navigation with simple iframe and CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking simple top and left navigation with simple iframe and CSS
    text
    copied!<p>I am having some trouble with this for some reason... I've been using old school html frames forever and decided I should start using iframes for easier javascript integration... I need a top nav and a left nav with content filling the rest of the page... Tell me what I'm doing wrong!!</p> <p><b>Original</b>:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;iframe style="display:block; width:100%; height:50px" src="navTop.html" name="iframeTop" scrolling="no" frameBorder="0"&gt; &lt;/iframe&gt; &lt;iframe style="display:inline; overflow:hidden; width=10%; height=100%;" src="navLeft.html" name="iframeLeft" scrolling="no" frameBorder="0"&gt; &lt;/iframe&gt; &lt;iframe style="display:block; float:right; width=90%; height=100%" src="content.html" name="iframeCenter" scrolling="auto" frameBorder="0"&gt; &lt;/iframe&gt; &lt;noframes&gt;&lt;/noframes&gt; &lt;/html&gt; </code></pre> <p>I am sure its something really simple that I am missing. Thanks in advance!</p> <p><b>Edit</b>: </p> <p>I started trying to accomplish this with div's and css... This is where I am... It's not working still... Help!!!</p> <p><b>CSS</b>: </p> <pre><code>&lt;style&gt; body { margin:0px; padding:0px; } #topNavigation div { background-color:100719; margin:0px; padding:0px; margin-top:0px; margin-left:0px; width:100%; height:50px; } #leftNavigation div { background-color:100719; margin:0px; padding:0px; margin-top:50px; margin-left:0px; width:400px; height:100%; } #displayContent div { background-color:100719; margin:0px; padding:0px; margin-top:50px; margin-left:400px; width:100%; height:100%; } &lt;/style&gt; </code></pre> <p><b>DIVS</b>:</p> <pre><code>&lt;body&gt; &lt;div id="topNavigation"&gt; &lt;iframe src="navTop.html" style="border:0px #FFFFFF none;" name="navTop" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px"&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;div id="leftNavigation"&gt; &lt;iframe src="navLeft.html" style="border:0px #FFFFFF none;" name="navLeft" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px"&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;div id="displayContent"&gt; &lt;iframe src="content.html" style="border:0px #FFFFFF none;" name="content" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px"&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload