Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking simple top and left navigation with simple iframe and CSS
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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